<template>
  <Container>
    <el-form slot="right" :inline="true" size="small">
      <el-form-item v-if="$accessCheck($Access.PartnershipAddShopPartner)">
        <el-button
          type="primary"
          @click="$router.push('/SystemSettings/liansuoguanli/AddPartnership')"
        >
          新增合作
        </el-button>
      </el-form-item>
      <el-form-item v-if="$accessCheck($Access.PartnershipSearch)">
        <el-input
          v-model="gridData.name"
          style="width: 200px"
          placeholder="合伙企业/人名称"
          clearable
          @clear="pageChange(1)"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="pageChange(1)"
          ></el-button>
        </el-input>
      </el-form-item>
      <el-form-item v-if="$accessCheck($Access.PartnershipSearch)">
        <el-input
          v-model="gridData.mobile"
          style="width: 200px"
          placeholder="负责人手机号"
          clearable
          @clear="pageChange(1)"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="pageChange(1)"
          ></el-button>
        </el-input>
      </el-form-item>
    </el-form>

    <el-table :data="tableData">
      <el-table-column
        prop="name"
        label="合伙企业/人名称"
        show-overflow-tooltip
        min-width="180"
      ></el-table-column>
      <el-table-column
        prop="userName"
        label="负责人名称"
        min-width="160"
      ></el-table-column>
      <el-table-column
        prop="mobile"
        label="负责人手机号"
        min-width="120"
      ></el-table-column>

      <el-table-column
        prop="area"
        label="合伙人地址"
        show-overflow-tooltip
        min-width="180"
      >
        <template slot-scope="scope">
          {{ scope.row.area.provinceName }}-{{ scope.row.area.cityName }}-{{
            scope.row.area.districtName
          }}-{{ scope.row.area.address }}
        </template>
      </el-table-column>
      <el-table-column prop="enableStatus" label="状态" min-width="160">
        <template slot-scope="scope">
          <el-tag
            size="small"
            :type="scope.row.enableStatus === 5 ? 'success' : 'info'"
          >
            {{ scope.row.enableStatus === 5 ? "启用" : "禁用" }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" min-width="160">
        <template slot-scope="scope">
          <el-button
            v-if="$accessCheck($Access.PartnershipEnableShopPartner)"
            type="text"
            @click="openPartnership(scope.row)"
          >
            {{ scope.row.enableStatus === 4 ? "启用" : "禁用" }}
          </el-button>
          <el-button
            v-if="$accessCheck($Access.PartnershipUpdateShopPartner)"
            type="text"
            @click="goDetail(scope.row.id)"
          >
            编辑
          </el-button>
          <el-button
            v-if="$accessCheck($Access.PartnershipDeleteShopPartner)"
            type="text"
            @click="delData(scope.row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <FooterPage
      :page-size="pageSize"
      :total-page.sync="total"
      :current-page.sync="page"
      @pageChange="pageChange"
      @sizeChange="sizeChange"
    ></FooterPage>
  </Container>
</template>

<script>
  import FooterPage from "@/component/common/FooterPage";
  import {
    partherSearch,
    getAllShopPartner,
    deleteShopPartner,
    enableShopPartner,
  } from "@/api/Shop";
  export default {
    name: "Partnership",
    components: {
      FooterPage,
    },
    mixins: [],
    data: function () {
      return {
        gridData: {
          name: "",
          mobile: "",
        },
        showLog: false,
        formLabelWidth: "100px",
        form: {
          key: "",
          type: "",
          classify: [],
          brand: "",
        },
        total: 0,
        page: 1,
        pageSize: 10,
        tableData: [],
      };
    },
    created() {
      this.getAllShopPartner();
    },
    activated() {
      if (this.$_isInit()) return;
      this.getData();
    },
    methods: {
      //  合作搜索 partherSearch
      async partherSearch() {
        const data = await partherSearch({
          page: this.page,
          pageSize: this.pageSize,
          ...this.gridData,
        });

        this.tableData = data.data;
        this.total = data.pageTotal;
      },
      //  请求商铺合作列表  getAllShopPartner getAllShopPartner
      async getAllShopPartner() {
        const data = await getAllShopPartner({
          page: this.page,
          pageSize: this.pageSize,
        });

        this.tableData = data.data;
        this.total = data.pageTotal;
      },
      getData() {
        const isKey = this.$_common.isSerch(this.gridData);
        if (isKey) {
          this.partherSearch();
        } else {
          this.getAllShopPartner();
        }
      },
      //  删除接口
      delData(id) {
        this.$confirm("你确定删除此合伙人/企业", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(async () => {
          const data = await deleteShopPartner(id);

          this.pageChange(1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        });
      },

      async openPartnership(row) {
        const title =
          row.enableStatus === 5 ? "确定禁用此商铺吗？" : "确定要启用此商铺吗";
        this.$confirm(title, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(async () => {
          const data = await enableShopPartner({
            partnerId: row.id,
            enableStatus: row.enableStatus === 5 ? 4 : 5,
          });

          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.getData();
        });
      },
      //  跳转到商铺合作编辑  EditPartnership
      goDetail(id) {
        this.$router.push(
          `/SystemSettings/liansuoguanli/EditPartnership/${id}`
        );
      },
      // 切页
      pageChange(val) {
        this.page = val;
        this.getData();
      },
      // 每页数据大小改变
      sizeChange(val) {
        this.pageSize = val;
        this.pageChange(1);
      },
      searchData(val) {
        this.page = 1;
        this.pageChange(1);
      },
    },
  };
</script>
<style scoped></style>
