<template>
  <div class="coverage">
    <div class="none-label mar-bottom10">
      <a-button type="primary" @click="editCoverageData(null)">
        <Icon name="ssiadd" :size="14" />新增责任
      </a-button>
    </div>
    <a-table
      :columns="columns"
      :locale="{ emptyText: 'No Data' }"
      :data-source="coverageData"
      row-key="coverageCode"
      :pagination="false"
    >
      <template slot="remarks" slot-scope="text">
        <a-tooltip placement="top">
          <template slot="title">
            <span>{{text}}</span>
          </template>
          <p class="ellipsis">{{text}}</p>
        </a-tooltip>
      </template>
      <template slot="operation" slot-scope="record">
        <a-button type="link" @click.stop="editCoverageData(record)">修改</a-button>
        <a-popconfirm
          title="你确定要删除吗？"
          ok-text="确定"
          cancel-text="取消"
          @confirm="deleteData(record)"
        >
          <a-button type="link" class="danger">删除</a-button>
        </a-popconfirm>
      </template>
      <template slot="expandedRowRender" slot-scope="record">
        <condition class="mar-bottom10" :form-data="{ ...record, conditionType: '02' }"/>
        <benefits :corpCode="corpCode" :planCode="planCode" :formData="record" />
      </template>
    </a-table>
    <a-modal
      title="责任管理"
      v-model="isCoverageEditShow"
      :footer="null"
      width="50%"
      @cancel="cancel"
    >
      <a-form-model ref="editForm" layout="vertical" :model="editForm" :rules="editRule">
        <a-row :gutter="20">
          <a-col :md="12">
            <a-form-model-item label="客户公司名称" prop="corpCode">
              <a-select v-model="editForm.corpCode" placeholder="请选择客户公司名称" disabled>
                <a-select-option v-for="item in corpCode" :key="item.corpCode" :value="item.corpCode">
                  {{ item.longName }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="保险责任" prop="coverageCode">
              <a-select v-model="editForm.coverageCode" show-search allow-clear :filterOption="filterCode">
                <a-select-option v-for="item in coverageCode" :key="item.coverageCode" :value="item.coverageCode">
                  {{ item.coverageDesc }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="英文描述">
              <a-input v-model="editForm.englishDesc"></a-input>
            </a-form-model-item>
            <a-form-model-item label="是否直付">
              <a-radio-group v-model="editForm.isDirect" :default-value="editForm.isDirect" button-style="solid"
              >
                <a-radio-button value="Y"> 是 </a-radio-button>
                <a-radio-button class="mar-left10" value="N"> 否 </a-radio-button>
              </a-radio-group>
            </a-form-model-item>
          </a-col>
          <a-col :md="12">
            <a-form-model-item label="保险计划" prop="planCode">
              <a-select v-model="editForm.planCode" placeholder="请选择保险计划" disabled>
                <a-select-option v-for="item in planCode" :key="item.planCode" :value="item.planCode">
                  {{ item.longName }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item label="等待期">
              <a-input-number v-model="editForm.waitingPeriod"></a-input-number>
            </a-form-model-item>
            <a-form-model-item label="描述">
              <a-input v-model="editForm.loaDesc"> </a-input>
            </a-form-model-item>
            <a-form-model-item label="状态" prop="isEffective">
              <a-select v-model="editForm.isEffective" placeholder="请选择计划状态" show-search allow-clear :filterOption="filterCode">
                <a-select-option v-for="item in statusCode" :key="item.code" :value="item.code" :label="item.name">{{ item.name }}</a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
        <!-- <a-form-model-item label="保险公司" prop="payorCode">
          <a-input disabled v-model="editForm.payorCode"> </a-input>
        </a-form-model-item> -->

        <a-form-model-item label="备注">
          <a-textarea v-model="editForm.remarks" maxLength="100" :autoSize="{ minRows: 2, maxRows: 5 }"></a-textarea>
        </a-form-model-item>
        <a-form-model-item>
          <a-button type="primary" @click="saveCoverageData">
            <Icon name="ssiadd" :size="14" />保存
          </a-button>
          <a-button class="mar-left10" @click="cancel">取消</a-button>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import benefits from "../benefits";
import condition from "../condition";

export default {
  props: {
    formData: {
      required: true,
      type: Object,
    },
    //客户公司名称
    corpCode: {
      default: []
    },
    //保险计划
    planCode: {
      default: []
    }
  },
  components: {
    benefits,
    condition,
  },
  data() {
    const columns = [
      { title: "门诊责任", dataIndex: "coverageDesc", width: 200 },
      { title: "是否直付", dataIndex: "isDirect", width: 120, customRender: (val) => {
        return val === 'Y' ? '是' : '否'
      } },
      { title: "等待期", dataIndex: "waitingPeriod", width: 120},
      // { title: "预授权", dataIndex: "sex", width: 80 },
      // { title: "预授权期限", dataIndex: "payorName", width: 180 },
      { title: "状态", dataIndex: "isEffective", width: 100,customRender: (val) => {
        for(let i = 0; i < this.statusCode.length; i ++) {
          if (val === this.statusCode[i].code) {
            return this.statusCode[i].name
          }
        }
        return val;
      } },
      { title: "备注", dataIndex: "remarks", scopedSlots: { customRender: "remarks" }, width: 200 },
      {
        title: "操作",
        key: "operation",
        width: "130px",
        fixed: "right",
        align: 'center',
        scopedSlots: { customRender: "operation" },
      },
    ];
    return {
      isCoverageEditShow: false,
      columns,
      coverageData: [],
      editForm: {},
      coverageCode: [],
      statusCode: [
        { code: "Y", name: "有效" },
        { code: "N", name: "无效" },
      ],
      editRule: {
        coverageCode: [{ required: true, message: "请选择保险责任" }],
        isEffective: [{ required: true, message: "请选择计划状态" }],
      },
    };
  },
  mounted() {
    this._getCoverageList();
  },
  methods: {
    // 新增或编辑coverage数据
    editCoverageData(data) {
      data = data || {
        payorCode: this.formData.payorCode,
        corpCode: this.formData.corpCode,
        planCode: this.formData.planCode,
        isDirect: "N",
        status: "1",
      };
      this._getCoverageCode();
      this.editForm = this.$lodash.cloneDeep(data);
      this.isCoverageEditShow = true;
    },
    // 选择框筛选
    filterCode(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },
    saveCoverageData() {
      this.$refs.editForm.validate((valid) => {
        if (!valid) {
          return false;
        }
        this._editCoverageData(this.editForm);
      });
    },
    cancel() {
      this.$refs.editForm.resetFields();
      this.isCoverageEditShow = false;
    },
    deleteData(record) {
      const data = this.$lodash.cloneDeep(record);
      data.status = "2"; // 置为无效状态即删除
      this._editCoverageData(data);
    },
    _editCoverageData(data) {
      const fn = data.id || data.id === 0 ? this.$apis.EDITCOVERAGEDATA : this.$apis.ADDCOVERAGEDATA;
      fn(data).then((res) => {
        if (res.returnCode === "0000") {
          this.$message.success(res.returnMsg || "操作成功");
          this._getCoverageList();
          this.isCoverageEditShow = false;
        } else {
          this.$message.error(res.returnMsg || "操作失败");
        }
      });
    },
    _getCoverageCode() {
      if (this.coverageCode && this.coverageCode.length) {
        return true;
      }
      this.$apis.GETCOVERAGECODE().then((res) => {
        this.coverageCode = res.content || [];
      });
    },
    _getCoverageList() {
      const { corpCode, payorCode, planCode } = this.formData;
      this.$apis.GETCOVERAGELIST({
          corpCode,
          payorCode,
          planCode,
          specialtyCode: "",
        }).then((res) => {
          this.coverageData = res.content || [];
        });
    },
  },
};
</script>

<style lang="less" scoped>
.coverage {
  .pa(0, 20, 10, 20);
  background-color: #fff;
}
</style>
