<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="searchForm.storeNameStr"
              size="small"
              style="width: 200px"
              placeholder="请输入店铺名称，用‘、’隔开"
            ></el-input>
          </el-form-item>
          <el-form-item label="管理员姓名">
            <el-input
              v-model="searchForm.adminNameStr"
              size="small"
              style="width: 220px"
              placeholder="请输入管理员姓名，用‘、’隔开"
            ></el-input>
          </el-form-item>
          <el-form-item label="管理员手机号">
            <el-input
              v-model="searchForm.adminMobileStr"
              size="small"
              style="width: 220px"
              placeholder="亲输入管理员手机号，用‘、’隔开"
            ></el-input>
          </el-form-item>
          <el-form-item label="企业类型">
            <el-select
              v-model="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="searchForm.doctorIdStr"
              size="small"
              style="width: 200px"
              placeholder="请输入医生ID，用‘、’隔开"
            ></el-input>
          </el-form-item>
          <el-form-item label="医生姓名">
            <el-input
              v-model="searchForm.doctorNameStr"
              size="small"
              style="width: 200px"
              placeholder="请输入医生姓名，用‘、’隔开"
            ></el-input>
          </el-form-item>
          <el-form-item label="企业名称">
            <el-input
              v-model="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">查询</el-button>
        <el-button type="default" size="small">重制</el-button>
      </div>
    </div>
    <div class="table">
      <div class="tab">
        <span
          :class="{ checked: item.id === tabChecked }"
          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 slot-scope="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 slot-scope="scope">
              <span>{{ scope.row.storeName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="storeType"
            label="管理员姓名"
            min-width="100"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.storeType | storeTypeFormat }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="storeType"
            label="管理员手机号"
            min-width="100"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.storeType | storeTypeFormat }}</span>
            </template>
          </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 slot-scope="scope">
              <span>{{ scope.row.storeName }}</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="storeType"
            label="医生姓名"
            min-width="100"
            align="center"
          >
            <template slot-scope="scope">
              <span>{{ scope.row.storeType | storeTypeFormat }}</span>
            </template>
          </el-table-column>
        </template>
        <el-table-column
          prop="storeStatus"
          label="企业姓名"
          min-width="100"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.storeStatus | statusFormat }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="count"
          label="企业类型"
          min-width="120"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.count }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="createdTime"
          label="审核状态"
          min-width="120"
          align="center"
        >
          <template slot-scope="scope">
            <span :class="scope.row.createdTime | typeState">{{
              scope.row.createdTime | examineType
            }}</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="commissionType"
          label="申请时间"
          width="120"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{ scope.row.commissionType | commissionTypeFormat }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="commissionPrice"
          label="审核人"
          width="120"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.commissionType == 1"
              >{{ scope.row.commissionPrice | priceNum }}%</span
            >
            <span v-if="scope.row.commissionType == 2"
              >{{ scope.row.commissionPrice | priceNum }}元</span
            >
          </template>
        </el-table-column>
        <el-table-column
          prop="commissionType"
          label="审核时间"
          width="120"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{
              scope.row.proxyCommissionType | commissionTypeFormat
            }}</span>
          </template>
        </el-table-column>
        <el-table-column
          label="操作"
          min-width="230"
          align="center"
          fixed="right"
        >
          <template slot-scope="scope">
            <div class="operation">
              <el-button @click="shopManage(scope.row)" type="text" size="small"
                >审核</el-button
              >
              <el-button
                @click="orderManage(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,
  },
  filters: {
    examineType(type) {
      const obj = {
        0: "待审核",
        1: "审核通过",
        2: "审核不通过",
      };
      return obj[type];
    },
    typeState(type) {
      const reviewType = ["tobe-reviewed", "success-reviewed", "no-reviewed"];

      return reviewType[type];
    },
  },
  data() {
    return {
      curmbFirst: "首营资质审核",
      tabList: [
        {
          id: 1,
          name: "全部",
        },
        {
          id: 2,
          name: "待审核",
        },
        {
          id: 3,
          name: "已审核",
        },
      ],
      searchForm: {
        adminMobileStr: "",
        adminNameStr: "",
        doctorIdStr: "",
        doctorNameStr: "",
        orgNameStr: "",
        orgType: "",
        pageNo: 1,
        pageSize: 10,
        status: "",
        storeNameStr: "",
      },
      orgList: [
        { id: 1, name: "医疗机构(非营利性)" },
        { id: 2, name: "医疗机构(营利性)" },
        { id: 3, name: "零售-单体药店" },
        { id: 4, name: "零售-连锁药店" },
      ],
      statusList: [
        { id: 0, name: "全部" },
        { id: 1, name: "待审核" },
        { id: 2, name: "已审核" },
      ],
      tableData: [
        {
          id: 1,
          storeName: "11",
          storeType: 2,
          storeStatus: 2,
          count: 2,
          createdTime: 2,
          commissionType: 2,
        },
      ],
      tabChecked: 1,
      totalRows: 0,
    };
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      const params = {
        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;
      });
    },
    checkTab(item) {
      this.tabChecked = item.id;
    },
  },
};
</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>
