<template>
  <div class="qualification-list">
    <bread-crumb :curmbFirst="curmbFirst"></bread-crumb>
    <div class="qualification-content screenSet" id="screenSet">
      <el-form
        ref="searchForm"
        :model="searchForm"
        label-width="100px"
        label-suffix=":"
        :inline="true"
      >
        <template v-if="$route.query.source === 'ghs'">
          <el-form-item label="店铺名称">
            <el-input
              v-model:value="searchForm.storeNameStr"
              size="small"
              style="width: 200px"
              placeholder="请输入店铺名称，用‘、’隔开"
            ></el-input>
          </el-form-item>
          <el-form-item label="管理员姓名">
            <el-input
              v-model:value="searchForm.adminNameStr"
              size="small"
              style="width: 220px"
              placeholder="请输入管理员姓名，用‘、’隔开"
            ></el-input>
          </el-form-item>
          <el-form-item label="管理员手机号">
            <el-input
              v-model:value="searchForm.adminMobileStr"
              size="small"
              style="width: 220px"
              placeholder="亲输入管理员手机号，用‘、’隔开"
            ></el-input>
          </el-form-item>
          <el-form-item label="企业类型">
            <el-select
              v-model:value="searchForm.orgType"
              placeholder="请选择"
              size="small"
              clearable
            >
              <el-option
                v-for="(item, index) in orgList"
                :key="index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </template>
        <template v-if="$route.query.source === 'pf'">
          <el-form-item label="医生ID">
            <el-input
              v-model:value="searchForm.doctorIdStr"
              size="small"
              style="width: 200px"
              placeholder="请输入医生ID，用‘、’隔开"
            ></el-input>
          </el-form-item>
          <el-form-item label="医生姓名">
            <el-input
              v-model:value="searchForm.doctorNameStr"
              size="small"
              style="width: 200px"
              placeholder="请输入医生姓名，用‘、’隔开"
            ></el-input>
          </el-form-item>
          <el-form-item label="企业名称">
            <el-input
              v-model:value="searchForm.orgNameStr"
              size="small"
              style="width: 200px"
              placeholder="亲输入企业名称，用‘、’隔开"
            ></el-input>
          </el-form-item>
        </template>
        <!-- <el-form-item label="审核状态">
              <el-select
                v-model="searchForm.status"
                placeholder="请选择"
                size="small"
              >
                <el-option
                  v-for="(item, index) in statusList"
                  :key="index"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item> -->
      </el-form>
      <div class="form-btn">
        <el-button type="primary" size="small" @click="submitForm"
          >查询</el-button
        >
        <el-button type="default" size="small" @click="resetForm"
          >重制</el-button
        >
      </div>
    </div>
    <div class="table">
      <div class="tab">
        <span
          :class="{ checked: item.id === searchForm.status }"
          v-for="item in tabList"
          :key="item.id"
          @click="checkTab(item)"
          >{{ item.name }}</span
        >
      </div>
      <el-table
        :data="tableData"
        align="left"
        class="item-table"
        style="width: 100%; margin-top: 10px"
      >
        <el-table-column
          prop="id"
          label="申请ID"
          min-width="100"
          align="center"
        >
          <template v-slot="scope">
            <span>{{ scope.row.id }}</span>
          </template>
        </el-table-column>
        <template v-if="$route.query.source === 'ghs'">
          <el-table-column
            prop="storeName"
            label="店铺名称"
            min-width="100"
            align="center"
            show-overflow-tooltip
          >
            <template v-slot="scope">
              <span>{{ scope.row.storeName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="adminName"
            label="管理员姓名"
            min-width="100"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="adminMobile"
            label="管理员手机号"
            min-width="100"
            align="center"
          >
          </el-table-column>
        </template>
        <template v-if="$route.query.source === 'pf'">
          <el-table-column
            prop="storeName"
            label="医生ID"
            min-width="100"
            align="center"
            show-overflow-tooltip
          >
            <template v-slot="scope">
              <span>{{ scope.row.storeName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="applyName"
            label="医生姓名"
            min-width="100"
            align="center"
          >
          </el-table-column>
        </template>
        <el-table-column
          prop="orgName"
          label="企业姓名"
          min-width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="orgType"
          label="企业类型"
          min-width="120"
          align="center"
        >
          <template v-slot="scope">
            <span>{{ scope.row.orgType }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="审核状态"
          min-width="120"
          align="center"
        >
          <template v-slot="scope">
            <span :class="typeState_filter(scope.row.status)">{{
              examineType_filter(scope.row.status)
            }}</span>
            <el-tooltip
              class="item"
              effect="dark"
              content="Top Left 提示文字"
              placement="top-start"
            >
              <i class="el-icon-warning-outline no-reviewed"></i>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column
          prop="applyTime"
          label="申请时间"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="auditName"
          label="审核人"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="auditTime"
          label="审核时间"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          min-width="230"
          align="center"
          fixed="right"
        >
          <template v-slot="scope">
            <div class="operation">
              <el-button @click="editDetail(scope.row)" type="text" size="small"
                >审核</el-button
              >
              <el-button @click="lookDetail(scope.row)" type="text" size="small"
                >查看详情</el-button
              >
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleNumChange"
          :current-page="searchForm.pageNo"
          :page-sizes="[10, 30, 50, 100]"
          :page-size="searchForm.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalRows"
        ></el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { openLoading, closeLoading } from '../../utils/utils'
import BreadCrumb from '@/components/breadcrumb.vue'
import { getCertifyList } from '@/utils/qualification'
export default {
  components: {
    BreadCrumb,
  },
  data() {
    return {
      curmbFirst: '首营资质审核',
      tabList: [
        { id: 0, name: '全部' },
        { id: 2, name: '待审核' },
        { id: 3, name: '审核成功' },
        { id: 4, name: '审核失败' },
        { id: 5, name: '作废' },
      ],
      searchForm: {
        adminMobileStr: '',
        adminNameStr: '',
        doctorIdStr: '',
        doctorNameStr: '',
        orgNameStr: '',
        orgType: '',
        pageNo: 1,
        pageSize: 10,
        status: 0,
        storeNameStr: '',
      },
      orgList: [
        { id: 1, name: '医疗机构(非营利性)' },
        { id: 2, name: '医疗机构(营利性)' },
        { id: 3, name: '零售-单体药店' },
        { id: 4, name: '零售-连锁药店' },
      ],
      tableData: [
        {
          id: 1,
          storeName: '11',
          storeType: 2,
          storeStatus: 2,
          count: 2,
          createdTime: 2,
          commissionType: 2,
        },
      ],
      pageNo: 1,
      pageSize: 10,
      totalRows: 0,
    }
  },
  created() {
    this.init()
  },
  methods: {
    typeState_filter(type) {
      const reviewType = ['tobe-reviewed', 'success-reviewed', 'no-reviewed']

      return reviewType[type]
    },
    examineType_filter(type) {
      const obj = {
        0: '待审核',
        1: '审核通过',
        2: '审核不通过',
      }
      return obj[type]
    },
    init() {
      const params = {
        pageSize: this.pageSize,
        pageNo: this.pageNo,
        type: Number(this.$route.query.type || 1),
        ...this.searchForm,
      }
      getCertifyList(params).then((res) => {
        console.log(res)
        const { contentList, total } = res.data
        this.tableData = contentList
        this.totalRows = total
      })
    },
    submitForm() {
      this.init()
    },
    editDetail() {
      this.$router.push({
        path: '/qualification-detail',
        query: { source: this.$route.query.source },
      })
    },
    lookDetail() {},
    resetForm() {
      ;(this.searchForm = {
        adminMobileStr: '',
        adminNameStr: '',
        doctorIdStr: '',
        doctorNameStr: '',
        orgNameStr: '',
        orgType: '',
        pageNo: this.pageNo,
        pageSize: this.pageSize,
        status: this.searchForm.status,
        storeNameStr: '',
      }),
        this.init()
    },
    handleSizeChange(value) {
      this.pageSize = value
      this.pageNo = 1
      this.init()
    },
    handleNumChange(value) {
      this.pageNo = value
      this.init()
    },
    checkTab(item) {
      this.searchForm.status = item.id
      this.init()
    },
  },
}
</script>

<style lang="scss" scope>
.qualification-list {
  .qualification-content {
    background: #fff;
    padding: 10px;
  }
  .form-btn {
    text-align: right;
  }
  .table {
    background-color: #fff;
    margin: 10px 30px;
    padding: 20px;
    .tobe-reviewed {
      color: #fac94d;
    }
    .success-reviewed {
      color: #71d60a;
    }
    .no-reviewed {
      color: #e2292a;
    }
    .tab {
      span {
        font-weight: bold;
        font-size: 18px;
        margin-right: 30px;
        cursor: pointer;
        &.checked {
          color: #0d9078;
        }
      }
    }
    .operation {
      span {
        color: #0d9078;
      }
    }
  }
}
</style>
