<template>
  <d2-container>
    <div class="providerOrderList-container">
      <div class="filter-box">
        <div class="filter-item">
          <div class="spana">商家名称：</div>
          <el-input v-model="conditionCollection.companyNameLike"
                    placeholder="请输入"></el-input>
        </div>
        <div class="filter-item">
          <div class="spana">商家性质：</div>
          <el-select v-model="conditionCollection.nature"
                     placeholder="全部">
            <el-option v-for="item in natureList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="filter-item">
          <div class="spana">商家类型：</div>
          <el-select v-model="conditionCollection.businessType"
                     placeholder="全部">
            <el-option v-for="item in businessTypeList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </div>
        <div class="filter-item">
          <div class="spana">账户状态：</div>
          <el-select v-model="conditionCollection.status"
                     placeholder="全部">
            <el-option v-for="item in statusList"
                       :key="item.value"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </div>
        <!-- 城市 -->
        <el-form :model="conditionCollection">
          <el-form-item label="所在城市：">
            <el-row :gutter="10"
                    style="width: 500px">
              <el-col :span="9">
                <el-form-item label="">
                  <el-select v-model="conditionCollection.provinceId"
                             :loading="isLoadProvinceId"
                             loading-text="信息加载中"
                             @change="provinceIdChange"
                             placeholder="选择省"
                             style="margin-left: 35px">
                    <el-option v-for="item in provinceIdList"
                               :key="item.id"
                               :label="item.name"
                               :value="item.id">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="7">
                <el-form-item label="">
                  <el-select v-model="conditionCollection.cityId"
                             placeholder="选择市">
                    <el-option v-for="item in cityIdList"
                               :key="item.id"
                               :label="item.name"
                               :value="item.id"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
        <div class="filter-item">
          <div class="spana">负责人：</div>
          <el-input v-model="conditionCollection.contactNameLike"
                    placeholder="请输入"></el-input>
        </div>
        <div class="filter-item">
          <div class="spana">联系电话：</div>
          <el-input v-model="conditionCollection.contactPhoneLike"
                    placeholder="请输入"></el-input>
        </div>
        <div class="filter-btn">
          <el-button type="primary"
                     size=""
                     @click="queryData()">查询</el-button>
          <el-button type=""
                     size=""
                     @click="reset()">重置</el-button>
          <el-button type="success"
                     icon="el-icon-circle-plus-outline"
                     @click="addBusiness()">添加商家</el-button>
        </div>
      </div>
      <div>
        <el-table :data="dataList"
                  size="medium"
                  style="width: 100%; text-align: center;"
                  :key="tablekey"
                  v-loading="loadings">
          <!-- <el-table-column prop="userCode" label="序号"> </el-table-column> -->
          <el-table-column prop="id"
                           label="商家编号"> </el-table-column>
          <el-table-column prop="companyName"
                           label="商家名称"></el-table-column>
          <el-table-column prop="natureValue"
                           label="商家性质"> </el-table-column>
          <el-table-column prop="businessTypeValue"
                           label="商家类型"> </el-table-column>
          <el-table-column prop="contactName"
                           label="负责人"></el-table-column>
          <el-table-column prop="contactPhone"
                           label="联系电话"> </el-table-column>
          <el-table-column prop="companyAddrTwo"
                           label="所在城市"> </el-table-column>
          <el-table-column prop="loginName"
                           label="登录账号"> </el-table-column>
          <el-table-column prop="statusValue"
                           label="状态"> </el-table-column>
          <el-table-column fixed="right"
                           label="操作"
                           width="120">
            <template slot-scope="scope">
              <!-- 编辑 -->
              <el-button type="text"

                         style="font-size: 14px; margin-left: 0px"
                         @click="detils(scope.row.openId)">查看详情</el-button>
              <!-- <el-button type="text"
                         v-if="scope.row.status == 0"
                         style="font-size: 14px; width: 90px; margin-left: 0"
                         @click="edit(scope.row.openId)">收款设置</el-button> -->
              <el-button type="text"
                         v-if="scope.row.status == 1"
                         style="font-size: 14px; margin-left: 10px"
                         @click="enable(scope.row.openId)">启用</el-button>
              <el-button type="text"
                         v-if="scope.row.status == 0"
                         style="font-size: 14px; margin-left: 10px;color:red"
                         @click="disable(scope.row.openId)">停用</el-button>

            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagination">
        <pagination v-show="total >= 0"
                    :total="total"
                    :page.sync="searchCriteria.pageNow"
                    :limit.sync="searchCriteria.pageSize"
                    @pagination="pagingEvent" />
      </div>
    </div>
  </d2-container>
</template>

<script>
import {
  jdAddressCascader,
  getNature,
  getBusinessType,
  getBusinessList,
  enableBusiness,
  disableBusiness
} from '@/libs/common/constant'
import { selectListALL } from '@/utils/json'
export default {
  data () {
    return {
      conditionCollection: {
        companyNameLike: '',
        nature: '',
        businessType: '',
        status: '',
        provinceId: '',
        cityId: '',
        contactNameLike: '',
        contactPhoneLike: ''
      },
      dataList: [],
      searchCriteria: {
        pageNow: 1,
        pageSize: 10
      },
      total: 0,
      tablekey: '',
      loadings: true,
      isLoadProvinceId: true,
      // 商家 性质
      natureList: [],
      // 商家类型
      businessTypeList: [],
      // 账户 状态
      statusList: [
        {
          label: '全部',
          value: ''
        },
        {
          label: '启用',
          value: 0
        },
        {
          label: '停用',
          value: 1
        }
      ],
      // 一级地址
      provinceIdList: [],
      // 二级地址
      cityIdList: [],
      determineQueryData: {}
    }
  },
  async created () {
    // 获取 字典 数据
    await this.getConstant()
    // 获取 初始 数据
    await this.queryData()
  },
  methods: {
    // 查询
    async queryData () {
      this.determineQueryData = this.conditionCollection
      var data = this.conditionCollection
      data.currentPage = this.searchCriteria.pageNow
      data.pageSize = this.searchCriteria.pageSize
      await this.getListData(data)
    },
    //  重置
    reset () {
      var obj = this.conditionCollection
      for (const key in obj) {
        obj[key] = ''
      }
    },
    // 获取 列表 参数
    async getListData (data) {
      this.loadings = true
      const dataList = await this.getBusinessList(data)
      console.log(dataList)
      this.total = dataList.total
      for (var i = 0; i < dataList.list.length; i++) {
        dataList.list[i].natureValue =
          dataList.list[i].supplierInfoBo.natureValue
        dataList.list[i].businessTypeValue =
          dataList.list[i].supplierInfoBo.businessTypeValue
        dataList.list[i].loginName = dataList.list[i].userList[0].loginName
        dataList.list[i].companyAddrTwo = dataList.list[i].companyAddr.split(" ")[0] + " "+ dataList.list[i].companyAddr.split(" ")[1]
      }
      this.dataList = dataList.list
      this.loadings = false
    },

    async getBusinessList (data) {
      const res = await this.$api.GET(`${getBusinessList.url}`, data)
      return res
    },
    async pagingEvent () {
      // await this.queryData();
      var data = this.determineQueryData
      data.currentPage = this.searchCriteria.pageNow
      data.pageSize = this.searchCriteria.pageSize
      await this.getListData(data)
    },

    // 添加 供应商
    addBusiness () {
      this.$router.push({
        path: '/addBusiness'
      })
    },
    // 编辑 供应商
    edit (openId) {
      this.$router.push({
        path: `/editBusiness/${openId}`
      })
    },
    // 查看详情
    detils (openId) {
      this.$router.push({
        path: `/detailsBusiness/${openId}`
      })
    },
    selectListALL (myJson) {
      return selectListALL(myJson)
    },
    // 获取 常量
    async getConstant () {
      await this.getProvinceIdList()
      await this.getNatureList()
      await this.getBusinessTypeList()
    },
    // 获取 一级地址
    async getProvinceIdList () {
      const res = await this.$api.GET(`${jdAddressCascader.url}`)
      this.provinceIdList = res
      this.isLoadProvinceId = false
    },
    // 获取 商家性质
    async getNatureList () {
      const res = await this.$api.GET(`${getNature.url}`)
      this.natureList = this.selectListALL(res)
    },
    // 获取 商家类型
    async getBusinessTypeList () {
      const res = await this.$api.GET(`${getBusinessType.url}`)
      this.businessTypeList = this.selectListALL(res)
    },
    // 获取 二级地址
    async provinceIdChange () {
      this.cityIdList = await this.$api.GET(
        `${jdAddressCascader.url2}${this.conditionCollection.provinceId}`
      )
    },
    async enable (openId) {
      this.$confirm('确定启用此供应商吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        // type: 'warning',
        customClass: 'custom-confirm'
      })
        .then(() => {
          this.enableBusiness(openId)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消启用!'
          })
        })
    },
    async enableBusiness (openId) {
      const res = await this.$api.POST(`${enableBusiness.url}`, {
        companyOpenId: openId
      })
      console.log(res)
      await this.queryData()
      this.$message({
        type: 'success',
        message: '启用成功!'
      })
    },
    disable (openId) {
      this.$confirm('确定停用此供应商吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        // type: 'warning',
        customClass: 'custom-confirm'
      })
        .then(() => {
          this.disableBusiness(openId)
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消停用!'
          })
        })
    },
    async disableBusiness (openId) {
      const res = await this.$api.POST(`${disableBusiness.url}`, {
        companyOpenId: openId
      })
      console.log(res)
      await this.queryData()
      this.$message({
        type: 'success',
        message: '停用成功!'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
