<template>
  <div class="shopAudit-container">
    <div class="content">
      <span class="name">关键词搜索：</span>
      <el-input
        placeholder="请输入（店铺名称/法人/手机号/公司名称）"
        suffix-icon="el-icon-search"
        v-model="params.keyword"
        size="medium"
        class="input-with-select"
      ></el-input>
      <el-button type="primary" size="medium" @click="getPrinterList">
        搜索
      </el-button>
      <el-button size="medium" @click="handleClear">清除条件</el-button>
    </div>
    <el-table
      :data="tableData"
      :height="tableConfig.height"
      :cell-class-name="handerColor"
      style="width: 100%"
    >
      <el-table-column
        align="center"
        v-for="(item, index) in tabColumn"
        :key="index"
        :prop="item.prop"
        :label="item.label"
      >
        <template #default="{ row, $index }"  v-if="item.label == '操作'">
          <el-button
            type="text"
            size="small"
            @click="handleSkipEdit(row, $index)"
          >
            详情
          </el-button>
        </template>

      </el-table-column>
    </el-table>
    <el-pagination
      background
      :current-page="params.pageNum"
      :layout="layout"
      :page-size="params.pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
    <shopAuditDetails
      :show="showDialog"
      :id="shopId"
      @close="closeDialog"
    ></shopAuditDetails>
  </div>
</template>

<script>
import shopAuditDetails from './shopAuditDetails'
import { getPrinterList } from '@/api/shopAudit/shopAudit'
export default {
  components: {
    shopAuditDetails,
  },
  data() {
    return {
      layout: 'total, sizes, prev, pager, next, jumper',
      total: 0,
      params: {
        keyword: '',
        page: 1,
        pageSize: 20,
      },
      showDialog: false,
      searchKeyWord: '',
      tableConfig: {
        height: window.innerHeight - 220 - 150,
      },
      shopId: 0,
      approvalStatus:[
        {
          key:1,
          value:'已通过',
        },
        {
          key:2,
          value:'未通过',
        },
        {
          key:3,
          value:'待审核',
        },
        {
          key:4,
          value:'未申请过',
        },
        {
          key:5,
          value:'已提交拉卡拉审核',
        },
        {
          key:21,
          value:'拉卡拉审核未通过',
        },
      ],
      signedStatus: [
        {
          index: -1,
          value: '预备数据阶段',
        },
        {
          index: 0,
          value: '等待签署',
        },
        {
          index: 1,
          value: '已部分签署',
        },
        {
          index: 2,
          value: '已完成',
        },
        {
          index: 3,
          value: '已撤销',
        },
        {
          index: 5,
          value: '已过期',
        },
        {
          index: 7,
          value: '已拒签',
        },
      ],
      entityType: ['企业', '个人'],
      storeStatus : ['已创建','未创建'],
      tabColumn: [
        {
          prop: 'operation',
          label: '操作',
        },
        {
          prop: 'store_id',
          label: '入驻商家的店铺ID',
        },
        {
          prop: 'store_name',
          label: '店铺名称',
        },
        {
          prop: 'login_mobile',
          label: '登录手机号',
        },
        {
          prop: 'contact_name',
          label: '联系人',
        },
        {
          prop: 'account_holder_name',
          label: '公司名称',
        },
        {
          prop: 'biz_category',
          label: '经营品类',
        },
        {
          prop: 'entity_type',
          label: '入驻主体类型',
        },
        {
          prop: 'legal_person_name',
          label: '法人姓名',
        },
        {
          prop: 'legal_person_mobile',
          label: '法人手机号',
        },
        {
          prop: 'approval_status',
          label: '审批状态',
        },
        {
          prop: 'store_status',
          label: '店铺创建状态',
        },
        {
          prop: 'has_apply_split',
          label: '是否创建分账',
        },
        {
          prop: 'has_ec_signed',
          label: '合同签署状态',
        },
      ],
      tableData: [
        {
          id: 0,
          login_mobile: 66,
          approval_status: 1,
        },
      ],
    }
  },
  computed: {},
  created() {
    this.getPrinterList()
  },
  methods: {
    async getPrinterList() {
      let res = await getPrinterList(this.params)
      if (res && res.status == 200) {
        if (res.data.items.length > 0) {
          res.data.items.forEach((item) => {
            if (item.approval_status) {

              const found = this.approvalStatus.find(group => group.key == item.approval_status);
              item.approval_status = found ? found.value : 'Unknown Status';
            }
            if(item.store_status){
              item.store_status  = this.storeStatus[item.store_status - 1]
            }

            if(item.has_apply_split){
              item.has_apply_split = item.has_apply_split == 1 ? '是' : '否'
            }

            if (item.has_ec_signed) {;
              item.has_ec_signed = item.has_ec_signed == 1 ? '是' : '否'
            }
            if (item.entity_type) {
              item.entity_type = this.entityType[item.entity_type - 1]
            }
          })
        }

        this.tableData = res.data.items
      }
    },
    handleClear() {
      this.params = {
        keyword: '',
        page: 1,
        pageSize: 20,
      }
      this.getPrinterList()
    },
    handleCurrentChange() {},
    handleSizeChange() {},
    handleSkipEdit(item) {
      this.showDialog = true
      this.shopId = item.id
    },
    handerColor({ row, column, rowIndex, columnIndex }) {
      if (row) {
        if (row.approval_status == '已通过' && columnIndex == 10) {
          return 'status-pass'
        }
        if (['拉卡拉审核未通过','未通过'].includes(row.approval_status)  && columnIndex == 10) {
          return 'status-not-pass'
        }
        if (['待审核','未申请过','已提交拉卡拉审核'].includes(row.approval_status)   && columnIndex == 10) {
          return 'status-check-pass'
        }

        if (row.store_status == '已创建' && columnIndex == 11) {
          return 'status-pass'
        }
        if (row.store_status == '未创建' && columnIndex == 11) {
          return 'status-not-pass'
        }

   
        if (row.has_apply_split == '是' && columnIndex == 12) {
          return 'status-pass'
        }
        if (row.has_apply_split == '否' && columnIndex == 12) {
          return 'status-not-pass'
        }

        if (row.has_ec_signed == '是' && columnIndex == 13) {
          return 'status-pass'
        }
        if (row.has_ec_signed == '否' && columnIndex == 13) {
          return 'status-not-pass'
        }
       
      }
    },
    closeDialog() {
      this.showDialog = false
      this.handleClear()
    },
  },
}
</script>

<style lang="scss">
.shopAudit-container {
  .content {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 20px 0;

    .name {
      font-weight: bold;
    }

    .input-with-select {
      margin: 0 10px;
      width: 270px;
    }
  }
  .status-pass {
    .cell {
      color: #48c978 !important;
    }
  }

  .status-not-pass {
    .cell {
      color: red !important;
    }
  }

  .status-check-pass {
    .cell {
      color: #ffba00 !important;
    }
  }
}
</style>