<template>
  <div class="info-special">
    <div class="btn-div">
      <a-button type="primary" @click="addNewEvt({})">
        <Icon name="ssiadd" :size="14" />新建科室
      </a-button>
    </div>
    <a-table :columns="columns" :data-source="dataList" :scroll="{ x: 'max-content' }" :pagination="false">
      <template slot="coverageMasterList" slot-scope="text">
        <span>{{ filterCoverage(text) }}</span>
      </template>
      <template slot="operation" slot-scope="text, record, index">
        <a-button type="link" @click.stop="addNewEvt(record)">修改</a-button>
        <a-button type="link" class="danger" @click.stop="delRecord(index)">删除</a-button>
      </template>
    </a-table>
    <!--分页-->
    <BurtPagination :pagination="pagination" />
    <a-modal :title="editFormObj.id?'编辑':'新建'" :visible="dialogShow" width="700px" :maskClosable="false"
      okText="确定" cancelText="取消"
      @ok="handleEditOK" @cancel="dialogShow = false">
      <a-form-model ref="editForm" :model="editFormObj" :rules="editRules">
        <a-row :gutter="30">
          <a-col :lg="12" :xs="24">
            <a-form-model-item label="科室名称" prop="specialtyDesc">
              <a-input v-model.trim="editFormObj.specialtyDesc" placeholder="科室名称" />
            </a-form-model-item>
          </a-col>
          <a-col :lg="12" :sm="24">
            <a-form-model-item label="责任列表" prop="coverageCode">
              <a-select v-model="editFormObj.coverageCode" placeholder="请选择责任" search allowClear mode="multiple">
                <a-select-option v-for="item in coverageCode" :key="item.coverageCode" :vlaue="item.coverageCode">
                  {{ item.coverageDesc }}
                </a-select-option>
              </a-select>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-modal>
  </div>
</template>

<script>
import BurtPagination from "@/components/CUSTOMER/pagation";
const columns = [
  { title: "序号", dataIndex: "id", ellipsis: true, width: 150 },
  { title: "科室名称", dataIndex: "specialtyDesc", ellipsis: true, width: 150 },
  { title: "科室编号", dataIndex: "specialtyCode", ellipsis: true, width: 150 },
  { title: "责任", dataIndex: "coverageMasterList", ellipsis: true, scopedSlots: { customRender: "coverageMasterList" }, width: 155,},
  { title: "操作", dataIndex: "operation", scopedSlots: { customRender: "operation" }, fixed: "right", width: "200px", align: "center", },
];
export default{
  data(){
    return {
      dialogShow: false,
      columns,
      dataList: [],
      pagination: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
      },
      coverageCode: [], //责任列表
      editFormObj: {
        id: '',
        specialtyDesc: '',
        coverageCode: []
      },
      editRules: {
        specialtyDesc: [{ required: true, message: "请输入科室名称", trigger: "blur" }, ]
      }
    }
  },
  components: {
    BurtPagination
  },
  created(){
    this.getData()
    this.getCoverageCode();
  },
  methods: {
    filterCoverage(val) {
      let txt = (val || []).map((item) => {
        return item.coverageDesc || "";
      });
      return txt.join("，");
    },
    getData(){
      this.$apis.SPECIALTYLISTPAGE({
        pageNum: this.pagination.pageNum,
        pageSize: this.pagination.pageSize,
      })
      .then((res) => {
        if (res.returnCode == "0000") {
          let content = res.content || {};
          this.pagination.total = content.total || 0;
          this.dataList = (content.list || []).map((item) => {
            let coverageCode = (item.coverageMasterList || []).map(item => item.coverageCode);
            return {
              ...item,
              coverageCode
            };
          });
          console.log(this.dataList, 111)
        } else {
          this.$message.error(res.returnMsg);
        }
      });
    },
    //获取责任列表
    getCoverageCode() {
      this.$apis.GETCOVERAGECODE().then((res) => {
        this.coverageCode = res.content || [];
      });
    },
    addNewEvt(record){
      this.dialogShow = true;
      this.$nextTick(()=>{
        this.$refs.editForm.resetFields();
        this.editFormObj = {
          id: record.id || "",
          specialtyDesc: record.specialtyDesc || "",
          coverageCode: record.coverageCode || [],
        };
      })
    },
    //新建/编辑
    handleEditOK() {
      this.$refs.editForm.validate((valid) => {
        if (valid) {
          let api = this.editFormObj.id? 'SPECIALTYUPDATE': 'SPECIALTYCREATE';
          this.$apis[api]({
            ...this.editFormObj,
            coverageMasterList: this.editFormObj.coverageCode.map(item => {
              return {
                coverageCode: item
              }
            })
          })
          .then((res) => {
            if (res.returnCode == "0000") {
              this.$message.success(this.editFormObj.id?"编辑成功":'新建成功');
              this.dialogShow = false;
              this.getData();
            } else {
              this.$message.error(res.returnMsg);
            }
          });
        }
      });
    },
    //删除科室
    delRecord(index) {
      this.$modal.confirm({
        title: "删除",
        content: "确定删除该条记录？",
        okText: "确定",
        cancelText: "取消",
        onOk: () => {
          this.$apis.SPECIALTYDELETE({
            id: this.dataList[index].id,
          })
          .then((res) => {
            if (res.returnCode == "0000") {
              this.$message.success("删除成功");
              this.dataList.splice(index, 1);
            } else {
              this.$message.error(res.returnMsg);
            }
          });
        },
      });
    },
  }
}
</script>

<style lang="less" scoped>
.btn-div{
  margin-bottom: 10px;
}
</style>