<template>
  <Container>
    <div
      v-if="
        $accessCheck($Access.ShopListAddShop) &&
        parseInt($store.getters['MUser/enterpriseScope']) === 5
      "
      slot="left"
    >
      <el-button type="primary" size="small" @click="addBrand">
        新建商铺
      </el-button>
    </div>
    <div slot="right">
      <el-form
        v-if="$accessCheck($Access.ShopListSearch)"
        :inline="true"
        size="small"
      >
        <el-form-item label="商铺名称">
          <el-input
            v-model="search_form.name"
            placeholder="关键词"
            clearable
            @keyup.enter.native="pageChange(1)"
            @clear="pageChange(1)"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="pageChange(1)"
            ></el-button>
          </el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select
            v-model="search_form.shopType"
            placeholder="商铺类型"
            @change="pageChange(1)"
          >
            <el-option label="全部" value=""></el-option>
            <el-option label="联营商铺" :value="1"></el-option>
            <el-option label="直营商铺" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="状态">
          <el-select
            v-model="search_form.enableStatus"
            placeholder="商铺状态"
            @change="pageChange(1)"
          >
            <el-option label="全部" value=""></el-option>
            <el-option label="启用" :value="5"></el-option>
            <el-option label="禁用" :value="4"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <el-table border :data="tableData">
      <el-table-column
        prop="id"
        align="center"
        label="ID"
        min-width="50"
      ></el-table-column>
      <el-table-column
        prop="name"
        label="商铺名称"
        align="center"
        show-overflow-tooltip
        min-width="160"
      ></el-table-column>
      <el-table-column
        prop="warehouseName"
        label="仓库名称"
        align="center"
        show-overflow-tooltip
        min-width="160"
      >
        <template slot-scope="scope">
          <span v-for="(item, index) in scope.row.warehouseData" :key="index">
            {{ item.warehouseName }};
          </span>
        </template>
      </el-table-column>
      <!--      provinceName   districtName   cityName   address-->
      <el-table-column
        prop="area"
        label="商铺地址"
        align="center"
        min-width="200"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span v-if="scope.row.area">
            {{ scope.row.area.provinceName || "" }}-{{
              scope.row.area.cityName
            }}-{{ scope.row.area.districtName }}-{{ scope.row.area.address }}
          </span>
        </template>
      </el-table-column>

      <el-table-column
        prop="inventory"
        label="商铺状态"
        align="center"
        min-width="100"
      >
        <template slot-scope="scope">
          <el-tag
            size="small"
            :type="scope.row.enableStatus === 5 ? 'success' : 'danger'"
          >
            {{ scope.row.enableStatus === 5 ? "启用" : "禁用" }}
          </el-tag>
        </template>
      </el-table-column>
      <!--      时间  end start-->

      <el-table-column
        prop="openTime"
        label="营业时间"
        align="center"
        min-width="120"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.openTime.isAllDay === 1">全天</span>
          <span v-else>
            {{ scope.row.openTime.start }}--{{ scope.row.openTime.end }}
          </span>
        </template>
      </el-table-column>
      <!--      <el-table-column-->
      <!--        prop="partnerName"-->
      <!--        label="负责人"-->
      <!--        align="center"-->
      <!--        min-width="120"-->
      <!--      >-->
      <!--      </el-table-column>-->
      <el-table-column
        prop="mobile"
        label="联系人电话"
        align="center"
        min-width="120"
      ></el-table-column>
      <el-table-column
        prop="tag"
        label="操作"
        align="center"
        min-width="220"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button-group class="table-btn-group">
            <el-button
              v-if="$accessCheck($Access.ShopListUpdateShopStatus)"
              type="text"
              @click="openShop(scope.row)"
            >
              {{ scope.row.enableStatus === 4 ? "启用" : "禁用" }}
            </el-button>
            <el-button
              v-if="$accessCheck($Access.ShopListEditShop)"
              type="text"
              @click="goDetail(scope.row.id)"
            >
              编辑
            </el-button>
            <!--            <el-button-->
            <!--              v-if="$accessCheck($Access.ShopListChangeManagerForShop)"-->
            <!--              type="text"-->
            <!--              @click="update(scope.row.id)"-->
            <!--            >-->
            <!--              更换负责人-->
            <!--            </el-button>-->
            <el-button
              v-if="$accessCheck($Access.ShopListDelShop)"
              type="text"
              @click="delData(scope.row.id)"
            >
              删除
            </el-button>
          </el-button-group>
        </template>
      </el-table-column>
    </el-table>
    <FooterPage
      :page-size="pageSize"
      :total-page.sync="total"
      :current-page.sync="page"
      @pageChange="pageChange"
      @sizeChange="sizeChange"
    ></FooterPage>
    <el-dialog
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      title="更换负责人"
      :visible.sync="change_show"
      width="30%"
    >
      <el-input
        v-model="manager"
        placeholder="请选择更换的负责人"
        readonly
        style="width: 300px"
      >
        <i
          slot="suffix"
          class="el-input__icon el-icon-search"
          @click="show_Partnership = true"
        ></i>
      </el-input>
      <span slot="footer" class="dialog-footer">
        <el-button @click="change_show = false">取 消</el-button>
        <el-button type="primary" @click="changeManaer">确 定</el-button>
      </span>
    </el-dialog>
    <PartnershipModel
      v-if="show_Partnership"
      :is-check="false"
      :dialog-visible="show_Partnership"
      @close="show_Partnership = false"
      @confirm="PartnershipConfirm"
    />
  </Container>
</template>

<script>
  import FooterPage from "@/component/common/FooterPage";
  import PartnershipModel from "@/component/common/PartnershipModel.vue";
  import {
    getAllShop,
    updateShopStatus,
    search,
    changeManagerForShop,
    delShop,
  } from "@/api/Shop";

  export default {
    name: "ShopList",
    components: {
      FooterPage,
      PartnershipModel,
    },
    data() {
      return {
        customer_id: "",
        manager: "", // 更换负责人
        shopPartnerId: "", // 更换负责人
        change_show: false,
        show_Partnership: false,
        search_form: {
          name: "",
          shopPartnerId: "",
          shopType: "",
          enableStatus: "",
        },
        total: 0,
        page: 1,
        pageSize: 10,
        tableData: [],
      };
    },
    created() {
      this.getAllShop();
    },
    activated() {
      if (this.$_isInit()) return;
      this.getData();
    },
    methods: {
      //  获取列表
      async getAllShop() {
        const data = await getAllShop({
          page: this.page,
          pageSize: this.pageSize,
        });

        this.tableData = data.data;
        this.total = data.pageTotal;
      },
      // 选择更换的负责人
      PartnershipConfirm(val) {
        this.manager = val[0].name;
        this.shopPartnerId = val[0].id;
      },
      /** 启用或禁用功能 */
      async openShop(row) {
        const title =
          row.enableStatus === 5
            ? "确定要禁用该商铺吗？"
            : "确定要启用该商铺吗？";
        this.$confirm(title, "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(async () => {
          const data = await updateShopStatus({
            id: row.id,
            enableStatus: row.enableStatus === 5 ? 4 : 5,
          });

          this.$message({
            type: "success",
            message: "操作成功!",
          });
          this.getData();
        });
      },
      // 点击搜索
      async searchList() {
        const params = {
          page: this.page,
          pageSize: this.pageSize,
          name: this.search_form.name,
          shopPartnerId: "",
          shopType: this.search_form.shopType,
          enableStatus: this.search_form.enableStatus,
        };

        const data = await search(params);

        this.tableData = data.data;
        this.total = data.pageTotal;
      },
      getData() {
        const obj = {
          name: this.search_form.name,
          shopPartnerId: "",
          shopType: this.search_form.shopType,
          enableStatus: this.search_form.enableStatus,
        };
        const isKey = this.$_common.isSerch(obj);
        if (isKey) {
          this.searchList();
        } else {
          this.getAllShop();
        }
      },
      // 更换商品负责人  接口
      update(id) {
        this.customer_id = id;
        this.change_show = true;
      },
      async changeManaer() {
        if (this.manager !== "") {
          const data = await changeManagerForShop({
            id: this.customer_id,
            shopPartnerId: this.shopPartnerId,
          });

          this.$message({
            type: "success",
            message: "更换成功",
          });
          this.change_show = false;
          this.pageChange(1);
        }
      },
      //  删除接口
      delData(id) {
        this.$confirm("你确定删除此商铺", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(async () => {
          const data = await delShop(id);

          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.pageChange(1);
        });
      },
      // 切页
      pageChange(val) {
        this.page = val;
        this.getData();
      },
      // 每页数据大小改变
      sizeChange(val) {
        this.pageSize = val;
        this.pageChange(1);
      },
      async updateBrand(brand) {},
      addBrand() {
        this.$router.push("/SystemSettings/liansuoguanli/AddShop");
      },
      goDetail(id) {
        this.$router.push(`/SystemSettings/liansuoguanli/EditShop/${id}`);
      },
    },
  };
</script>
<style scoped></style>
