<template>
  <div class="app-container">
    <!-- 顶部操作区域 -->
    <div class="filter-container">
      <div class="filter-control">
        <span>供应商名称:</span>
        <el-input
          v-model="listQuery.shopName"
          placeholder="供应商名称"
          clearable
          @keyup.enter.native="getList"
          @clear="getList"
        />
      </div>
      <div class="filter-control">
        <span>手机号:</span>
        <el-input
          v-model="listQuery.contractMobile"
          placeholder="手机号"
          clearable
          style="width:160px;"
          @keyup.enter.native="getList"
          @clear="getList"
        />
      </div>
      <div class="filter-control">
        <span>联系人:</span>
        <el-input
          v-model="listQuery.linkMan"
          placeholder="联系人"
          clearable
          style="width:160px;"
          @keyup.enter.native="getList"
          @clear="getList"
        />
      </div>
      <div class="filter-control">
        <el-button type="primary" @click="getList">查询</el-button>
        <el-button v-permission="'tag:list:add'" type="primary" @click="handleAddSupplier">添加供应商</el-button>
      </div>
    </div>
    <!-- 关键词列表 -->
    <el-table v-loading="isLoading" :data="list" border>
      <el-table-column label="序号" type="index" align="center" width="100" />
      <el-table-column prop="shopName" label="供应商名称" align="center" width="300" />
      <el-table-column prop="linkMan" label="联系人" align="center" width="300" />
      <el-table-column prop="contractMobile" label="手机号" align="center" width="300">
        <template slot-scope="{ row }">
          {{ row.contractMobile ? row.contractMobile : '---' }}
        </template>
      </el-table-column>
      <el-table-column prop="addTime" label="添加时间" align="center" width="300" />
      <el-table-column label="操作" align="center">
        <template slot-scope="{ row }">
          <el-button type="primary" size="mini" @click="handleTagsList(row)">标签列表</el-button>
          <el-button v-permission="'tag:list:del'" type="danger" size="mini" @click="handleDeleteSupper(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 页码 -->
    <pagination
      :total="total"
      :page-size="10"
      :page.sync="listQuery.pageNum"
      :limit.sync="listQuery.pageSize"
      @pagination="fetchShopRelevanceList"
    />
    <!-- 添加供应商 -->
    <el-dialog
      title="添加供应商"
      :visible.sync="addSupplierDialog"
      width="1000px"
      :close-on-click-modal="false"
      :show-close="false"
    >
      <div class="filter-container">
        <div class="filter-control">
          <span>供应商ID:</span>
          <el-input
            v-model="shopListQuery.shopId"
            placeholder="供应商ID"
            clearable
            @keyup.enter.native="fetchShopLabelShopList"
            @clear="fetchShopLabelShopList"
          />
        </div>
        <div class="filter-control">
          <span>供应商名称:</span>
          <el-input
            v-model="shopListQuery.name"
            placeholder="供应商名称"
            clearable
            style="width:160px;"
            @keyup.enter.native="fetchShopLabelShopList"
            @clear="fetchShopLabelShopList"
          />
        </div>
        <div class="filter-control">
          <el-button type="primary" @click="fetchShopLabelShopList">查询</el-button>
        </div>
      </div>
      <el-table ref="table" v-loading="isLoading" :data="supplierList" height="350px" border @select="handleSelect">
        <el-table-column type="selection" width="55" />
        <el-table-column label="供应商ID" prop="shopId" align="center" width="100" />
        <el-table-column label="供应商名称" prop="name" align="center" />
        <el-table-column label="联系人" prop="linkMan" align="center" />
        <el-table-column label="手机号" prop="contractMobile" align="center">
          <template slot-scope="{ row }">
            {{ row.contractMobile ? row.contractMobile : '---' }}
          </template>
        </el-table-column>
      </el-table>
      <!-- 页码 -->
      <pagination
        :total="shopListTotal"
        :page-sizes="[100, 200]"
        :page-size="100"
        :page.sync="shopListQuery.pageNum"
        :limit.sync="shopListQuery.pageSize"
        @pagination="fetchShopLabelShopList"
      />
      <div slot="footer">
        <el-button @click="addSupplierDialog = false">取 消</el-button>
        <el-button type="primary" :disabled="disabled" @click="handleAddTagConfirm(supplierRadio)">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { fetchShopRelevanceList, fetchShopLabelShopList, importShopRelevance, fetchDelShopById } from '@/api/user/supplier/supplier'

export default {
  data() {
    return {
      isLoading: true,
      addSupplierDialog: false,
      supplierList: [],
      listQuery: {
        shopName: '',
        linkMan: '',
        contractMobile: '',
        pageNum: 1,
        pageSize: 10
      },
      list: [],
      total: 0,
      shopListTotal: 0,
      shopListQuery: {
        pageNum: 1, // 页码
        pageSize: 200, // 页面数据数
        shopId: '', // 供应商ID
        name: ''// 供应商公司名称
      },
      supplierRadio: null,
      isAddSupplier: false
    }
  },
  computed: {
    disabled() {
      return this.supplierRadio === null
    }
  },
  created() {
    this.getList()
  },
  methods: {
    // 选择供应商
    handleSelect(selection, row) {
      this.$refs.table.clearSelection()
      this.$refs.table.toggleRowSelection(row)
      this.supplierRadio = row.shopId
      console.log('supplierRadio', this.supplierRadio)
    },
    // 获取关键词列表
    getList() {
      this.listQuery.pageNum = 1
      this.fetchShopRelevanceList()
    },

    // 获取供应商列表
    async fetchShopRelevanceList() {
      try {
        this.isLoading = true
        const res = await fetchShopRelevanceList(this.listQuery)
        this.list = res.data.results
        this.total = res.data.totalRecord
        this.isLoading = false
      } catch (error) {
        console.log(error)
      }
    },
    // 显示选择供应商弹窗 查询列表
    handleAddSupplier() {
      this.addSupplierDialog = true
      this.fetchShopLabelShopList()
    },
    // 获取所有供应商列表
    async fetchShopLabelShopList() {
      this.supplierList = []
      try {
        const res = await fetchShopLabelShopList(this.shopListQuery)
        this.supplierList = res.data.results
        this.shopListTotal = res.data.totalRecord
      } catch (error) {
        console.log(error)
      }
    },
    // 确定选择供应商
    async handleAddTagConfirm(shopId) {
      try {
        if (this.isAddSupplier) { return }
        this.addSupplierDialog = false
        this.isAddSupplier = true
        await importShopRelevance({ shopId: shopId })
        this.$message.success({
          message: '添加供应商成功',
          type: 'success',
          center: true,
          duration: 2000,
          onClose: () => {
            this.isAddSupplier = false
            this.shopListQuery.name = ''
            this.shopListQuery.shopId = ''
            this.supplierRadio = null
            this.getList()
          }
        })
      } catch (error) {
        this.isAddSupplier = false
        console.log(error)
      }
    },
    // 删除供应商
    async handleDeleteSupper(row) {
      try {
        await this.$confirm('确定删除吗？该供应商关联的标签也将一并删除。', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        this.deleteShowSubmit(row)
      } catch (error) {
        this.$message.info('已取消删除操作')
      }
    },
    // 删除
    async deleteShowSubmit(row) {
      try {
        await fetchDelShopById({ relevanceId: row.id })
        this.$message.success('操作成功')
        this.getList()
      } catch (error) {
        console.log(error)
      }
    },
    // 标签列表
    handleTagsList(row) {
      this.$router.push({ path: '/library/supplierTag/tagList', query: { shopId: row.shopId, relevanceId: row.id }})
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep{
  thead .el-checkbox{display: none !important;}
}
</style>
