<template>
  <page-layer>
    <template #header>
      <span class="match-title">医保科室匹配</span>
      <el-select v-model="piPeiLeiXing" @change="queryYuanNeiKeShiChange">
        <el-option key="1" label="未匹配" value="1"></el-option>
        <el-option key="2" label="已匹配" value="2"></el-option>
      </el-select>
      <span>同步查询 &nbsp;</span>
      <el-select v-model="tongbu">
        <el-option key="false" label="禁用" :value="false"></el-option>
        <el-option key="true" label="启用" :value="true"></el-option>
      </el-select>&nbsp;
      <el-button @click="chongZhi" type="warning">重置</el-button>
      <el-button @click="keShiPiPeiClick" type="success">匹配</el-button>
    </template>
    <template #main>
      <el-container>
        <el-aside width="600px" style="margin-right: 30px">
          <el-tag type="info" effect="dark">本院数据</el-tag>
          <el-divider direction="vertical"></el-divider>
          <span>本院科室名称 &nbsp;&nbsp;</span>
          <el-input style="width: 200px" v-model="benYuanMingCheng"></el-input>
          <el-table :data="cptBenYuan" :height="tableHeight" stripe highlight-current-row @row-click="benYuanRow" style="margin-top: 5px">
            <el-table-column label="本院编码">
              <template #default="scope">
                <el-radio :label="scope.row.code" v-model="benYuanRadio.code"></el-radio>
              </template>
            </el-table-column>
            <el-table-column label="本院名称" prop="name"></el-table-column>
            <el-table-column label="匹配医保编码" v-if="piPeiLeiXing == 2" prop="siCaty"></el-table-column>
            <el-table-column label="匹配医保名称" prop="siCatyName" v-if="piPeiLeiXing == 2"></el-table-column>
            <el-table-column label="删除匹配" v-if="piPeiLeiXing == 2">
              <template #default="scope">
                <el-popconfirm
                    confirm-button-text="确认"
                    cancel-button-text="取消"
                    icon="Info"
                    iconColor="red"
                    title="是否删除该数据"
                    @confirm="shanChuPiPei(scope.$index, scope.row)"
                >
                  <template #reference>
                    <el-button type="danger">删除</el-button>
                  </template>
                </el-popconfirm>
              </template>
            </el-table-column>
          </el-table>
        </el-aside>
        <el-main>
          <el-tag type="info" effect="dark">医保数据</el-tag>
          <el-divider direction="vertical"></el-divider>
          <span>医保科室名称 &nbsp;&nbsp;</span>
          <el-input style="width: 200px" v-model="yiBaoMingCheng"></el-input>
          <el-table :data="cptYiBao" :height="tableHeight" stripe highlight-current-row @row-click="yiBaoRow" style="margin-top: 5px">
            <el-table-column label="医保编码">
              <template #default="scope">
                <el-radio :label="scope.row.code" v-model="yiBaoRadio.code"></el-radio>
              </template>
            </el-table-column>
            <el-table-column label="医保名称" prop="name"></el-table-column>
          </el-table>
        </el-main>
      </el-container>
    </template>
  </page-layer>
</template>

<script>
import { computed, onMounted, ref } from '@vue/runtime-core'
import { getYiBaoKeShi, getBenYuanKeShi, piPeiKeShi } from '@/api/dictionary/yi-bao-ke-shi-pi-pei'
import store from '@/store'
import { ElMessage, ElMessageBox } from 'element-plus'
import PageLayer from "@/layout/PageLayer";
export default {
  name: 'YiBaoKeShiPiPei',
  components: {PageLayer},
  setup() {
    const windowsSize = store.state.app.windowSize
    const tableHeight = windowsSize.h - 75

    const benYuanMingCheng = ref('')
    const yiBaoMingCheng = ref('')

    const piPeiLeiXing = ref('1')

    ///////////////////////////// 查看匹配还是未匹配 /////////////////////////////////////////////////////
    const queryYuanNeiKeShiChange = () => {
      getBenYuanKeShi(piPeiLeiXing.value).then((res) => {
        benYuanKeShiTable.value = res
      })
    }

    //////////////////////// 处理表格数据 ///////////////////////////////////////////
    const benYuanKeShiTable = ref([])
    const yiBaoKeShiTable = ref([])

    onMounted(() => {
      getYiBaoKeShi().then((res) => {
        yiBaoKeShiTable.value = res
      })

      getBenYuanKeShi(piPeiLeiXing.value).then((res) => {
        benYuanKeShiTable.value = res
      })
    })

    const cptBenYuan = computed(() => {
      if (tongbu.value) {
        yiBaoMingCheng.value = benYuanMingCheng.value
      }
      return benYuanKeShiTable.value.filter((item) => {
        return item.name.indexOf(benYuanMingCheng.value) > -1
      })
    })

    const cptYiBao = computed(() => {
      return yiBaoKeShiTable.value.filter((item) => {
        return item.name.indexOf(yiBaoMingCheng.value) > -1
      })
    })

    // 重置 //
    const chongZhi = () => {
      benYuanMingCheng.value = ''
      yiBaoMingCheng.value = ''
      benYuanRadio.value = ''
      yiBaoRadio.value = ''
    }
    //////////////////////////////// 处理点击表格事件 ////////////////////////////////
    const benYuanRadio = ref({})
    const yiBaoRadio = ref({})

    const benYuanRow = (row) => {
      // 截取开头的两位字符串
      yiBaoMingCheng.value = row.name.substring(0, 2)
      benYuanRadio.value = row
    }

    const yiBaoRow = (row) => {
      yiBaoRadio.value = row
    }

    /////////////////////////////////////////// 开始匹配 /////////////////////////////////////////////////
    const keShiPiPeiClick = () => {
      if (!benYuanRadio.value || !yiBaoRadio.value) {
        ElMessage.error({
          message: '还有一项未选择',
          showClose: true,
        })
      } else {
        ElMessageBox.confirm(
          '<span>院内：【' +
            benYuanRadio.value.code +
            '】【' +
            benYuanRadio.value.name +
            '】</span></br><span>医保：【' +
            yiBaoRadio.value.code +
            '】【' +
            yiBaoRadio.value.name +
            '】</span>',
          '提示',
          {
            dangerouslyUseHTMLString: true,
            type: 'warning',
          }
        )
          .then(() => {
            piPeiKeShi(benYuanRadio.value.code, yiBaoRadio.value.code, 1).then((res) => {
              for (let i = 0; i < benYuanKeShiTable.value.length; i++) {
                if (benYuanKeShiTable.value[i].code === benYuanRadio.value.code) {
                  benYuanKeShiTable.value.splice(i, 1)
                }
              }
              chongZhi()
            })
          })
          .catch((e) => {})
      }
    }

    const shanChuPiPei = (index, row) => {
      piPeiKeShi(row.code, row.siCaty, 2).then((res) => {
        benYuanKeShiTable.value.splice(index, 1)
      })
    }

    ////////////////判断是否同步 /////////////////////////
    const tongbu = ref(false)

    return {
      tableHeight,
      benYuanMingCheng,
      yiBaoMingCheng,
      chongZhi,
      cptBenYuan,
      cptYiBao,
      benYuanRadio,
      yiBaoRadio,
      benYuanRow,
      yiBaoRow,
      keShiPiPeiClick,
      piPeiLeiXing,
      queryYuanNeiKeShiChange,
      shanChuPiPei,
      tongbu,
    }
  },
}
</script>

<style>
.match-title {
  padding: 5px 10px;
  background-color: lightslategray;
  font-size: 18px;
  font-weight: bold;
  color: white;
  border-radius: 3px;
  margin-right: 15px;
}
</style>
