<template>
  <basic-container>
    <div class="search-content">
      <el-form :model="searchFrom" label-width="140px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="执行包年度">
              <el-date-picker clearable class="w100" v-model="searchFrom.year" type="year" placeholder="请选择执行包年度" format="yyyy" value-format="yyyy"> </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="执行包季度">
              <el-select v-model="searchFrom.quarter" placeholder="请选择服务季度" class="w100" clearable :disabled="!searchFrom.year">
                <el-option :label="item.label" :value="item.value" v-for="item in quarterList" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="执行包ID">
              <el-input v-model="searchFrom.pkgId" placeholder="请输入内容"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="审核阶段">
              <el-select v-model="searchFrom.checkState" placeholder="请选择审核阶段" class="w100" clearable>
                <el-option :label="item.key" :value="item.value" v-for="item in statusList" :key="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="知会阶段">
              <el-select v-model="searchFrom.step" placeholder="请选择知会阶段" class="w100" clearable>
                <el-option label="第一阶段" :value="1"></el-option>
                <el-option label="第二阶段" :value="2"></el-option>
                <el-option label="第三阶段" :value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="产品所属生产企业">
              <el-select v-model="searchFrom.mahName" @change="mahNameChange" placeholder="请选择产品所属生产企业" class="w100" clearable>
                <el-option v-for="item in mahNameArr" :key="item.value" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="关联产品名称">
              <el-select v-model="searchFrom.skuId" placeholder="请选择关联产品名称" class="w100" :disabled="drugDisabled" clearable filterable>
                <el-option v-for="item in currDrugList" :key="item.id" :label="item.drugNameTy" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="执行包所属省份">
              <el-select v-model="searchFrom.provAbbr" placeholder="请选择省份" class="w100" clearable>
                <el-option v-for="province in abbreviationsProvincesList" :key="province" :label="province" :value="province" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="执行包名称">
              <el-select v-model="searchFrom.pkgIds" placeholder="请选择执行包名称" class="w100" clearable filterable>
                <el-option v-for="(item, index) in relPkgNameArr" :key="index" :label="item.scorePackageName" :value="item.id" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <div class="search-btns">
              <el-button type="success" class="btn-style" @click="clickBtn">搜索</el-button>
              <el-button @click="clearSearch">清空</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <avue-crud
      ref="crud"
      :page.sync="page"
      :data="tableData"
      :table-loading="tableLoading"
      :option="tableOption"
      @refresh-change="refreshChange"
      @size-change="sizeChange"
      @current-change="currentChange"
    >
      <!-- 左侧添加按钮 -->
      <template slot="menuLeft" v-if="userInfo.roles.includes(4)">
        <el-button type="primary" size="small" @click="createFn">新增知会 </el-button>
      </template>
      <!-- 操作栏 -->
      <template slot="menu" slot-scope="scope">
        <el-button v-if="userInfo.roles.includes(41) && scope.row.checkState === 'CKT2'" type="text" size="small" icon="el-icon-reading" @click="reviewFn(scope.row)"
          >审核
        </el-button>
        <el-button type="text" size="small" icon="el-icon-reading" @click="detailFn(scope.row)">查看 </el-button>
      </template>
    </avue-crud>
    <createDialig ref="createDialigRef" @success="refreshChange" />
  </basic-container>
</template>

<script>
import { getDrug2Avail, getPkgV2Api } from '@/api/serviceManagement/servicesToBeReviewed/index.js';
import { getDictType } from '@/api/common';
import dayjs from 'dayjs';
import createDialig from './components/createDialig.vue';
import { redemptionNoticePageApi, redemptionNoticeReadApi, redemptionPkgAllListApi } from '@/api/distributeVoucher.js';
import { tableOption } from '@/const/crud/distributeVoucher.js';
import { mapGetters } from 'vuex';
import abbreviationsProvinces from '@/const/abbreviationsProvinces.js';
export default {
  components: { createDialig },
  data() {
    return {
      tableLoading: false,
      tableOption: tableOption,
      quarterList: [
        {
          label: '第一季度',
          value: 1
        },
        {
          label: '第二季度',
          value: 2
        },
        {
          label: '第三季度',
          value: 3
        },
        {
          label: '第四季度',
          value: 4
        }
      ],
      statusList: [
        { key: '审核通过', value: 'PASSED' },
        { key: '审核拒绝', value: 'REJECTED' },
        { key: '待分管领导审批', value: 'CKT4' }
      ],
      mahNameArr: [],
      drugListArr: [],
      drugDisabled: true,
      currDrugList: [],
      relPkgNameArr: {},
      abbreviationsProvincesList: abbreviationsProvinces,
      searchFrom: {
        year: '',
        quarter: '',
        pkgId: '',
        checkState: '',
        step: '',
        mahName: '',
        skuId: '',
        provAbbr: '',
        pkgIds: ''
      },
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 10 // 每页显示多少条
      },
      tableData: []
    };
  },

  computed: {
    ...mapGetters(['userInfo', 'roles'])
  },
  mounted() {
    const lastYear = dayjs().subtract(1, 'year').format('YYYY');
    this.searchFrom.year = lastYear;
    this.getList(this.page, this.searchFrom);
    this.getDict();
  },
  methods: {
    getDict() {
      getDictType({ type: 'mah_name' }).then((res) => {
        this.mahNameArr = res.data.data;
      });
      getDrug2Avail().then((res) => {
        this.drugListArr = res.data.data;
      });
      redemptionPkgAllListApi().then((res) => {
        this.relPkgNameArr = res.data.data;
      });
    },
    mahNameChange(e) {
      if (e) {
        const curr = this.drugListArr[e];
        this.currDrugList = curr;
        this.drugDisabled = false;
      } else {
        this.searchFrom.skuId = '';
        this.currDrugList = [];
        this.drugDisabled = true;
      }
    },
    clickBtn() {
      this.tableData = [];
      this.page.currentPage = 1;
      this.getList(this.page, this.searchFrom);
    },
    clearSearch() {
      this.searchFrom = {
        year: dayjs().subtract(1, 'year').format('YYYY'),
        quarter: '',
        pkgId: '',
        checkState: '',
        step: '',
        mahName: '',
        skuId: '',
        provAbbr: '',
        pkgIds: ''
      };
    },
    async getList(page, params) {
      this.tableLoading = true;
      const obj = Object.assign(
        {
          current: page.currentPage,
          size: page.pageSize
        },
        params
      );
      const res = await redemptionNoticePageApi(obj);
      if (res.data.code === 0) {
        this.tableData = res.data.data.records;
        this.page.total = res.data.data.total;
      }
      this.tableLoading = false;
    },

    createFn() {
      this.$refs.createDialigRef.createFn('1');
    },
    detailFn(row) {
      let type;
      if (this.userInfo.roles.includes(37)) {
        type = 3;
      } else {
        type = 2;
      }

      this.$refs.createDialigRef.detail(row, type);
    },
    reviewFn(row) {
      this.$refs.createDialigRef.review(row, 4);
    },
    refreshChange() {
      this.getList(this.page, this.searchFrom);
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
      this.getList(this.page, this.searchFrom);
    },
    currentChange(current) {
      this.page.currentPage = current;
      this.getList(this.page, this.searchFrom);
    }
  }
};
</script>

<style lang="scss" scoped>
::v-deep .el-input-number {
  input {
    text-align: left;
  }
}
.search-btns {
  margin-left: 50px;
  display: flex;

  .btn-style {
    margin-right: 15px;
  }
}
</style>
