<template>
  <div style="display: flex; ">
    <div style="width:230px;">
      <div style="display: flex;">
        <span>项目类别</span>
        <el-cascader :options="dict.itemTypeTree" v-model="itemTypeIds" style="margin-left: 3px;width:160px;"
          :props="{ checkStrictly: true, expandTrigger: 'hover', ...customerOrg.treeprops, }" :show-all-levels="false"
          clearable filterable @change="parseAsbitem" size="small" ref="example" popper-class="example">
        </el-cascader>
      </div>
      <div class="mainareaBox">
        <el-table :data="asbItems" :height="400" @row-dblclick="dbClickChoosedAsb"
          @selection-change="handleSelectionChange" size="small">
          <el-table-column type="selection" align="center" width="60" />
          <el-table-column prop="displayName" label="未选诊断" width="160" />
        </el-table>
      </div>
    </div>

    <div style="width:110px;margin-top: 70px;">
      <div class="btnList">
        <el-button type="primary" @click="addAbs(asbItemChoosed)" style="width:90px;">添加 <i class="el-icon-right"></i>
        </el-button>
      </div>
      <div class="btnList">
        <el-button type="primary" @click="delAbs(asbItemOCXChoosed)" style="width:90px;">移除 <i class="el-icon-back"></i>
        </el-button>
      </div>
    </div>

    <div style="display: block; width:230px;">

      <div class="disTotal">
        <el-select v-model="asbItemId" placeholder="快速选择诊断" size="small" filterable clearable remote automatic-dropdown
          :remote-method="remoteMethod" @change="quickChoosedAsb" default-first-option ref="asbItemId"
          style="width:150px;text-align: left;padding-right: 15px;">
          <el-option v-for="item in quickAsb" :key="item.id" :value="item.id" :label="item.displayName" />
        </el-select>
      </div>

      <div class="mainareaBox">
        <el-table :data="diagnosis.dataAsbitemOCX" height="400" width="100%" @row-dblclick="removeAbs"
          @selection-change="selecteditems" size="small">
          <!-- temporaryselection   personnelUnit.nogroupselected-->
          <el-table-column type="selection" align="center" width="60" />
          <el-table-column label="已选诊断" width="160" prop="displayName" />
        </el-table>
      </div>
    </div>

    <div style="width:100px;margin-top: 70px;">
      <div class="btnList">
        <el-button type="primary" @click="diagnosisTemplateVisble = true" style="width:90px;">复制模板</el-button>
      </div>
      <div class="btnList">
        <el-button type="primary" @click="btnOk('close')" style="width:90px;">确定 <i class="el-icon-check"></i>
        </el-button>
      </div>
      <!-- <div class="btnList"
        style="text-align: center;background-color: rgb(192, 192, 192);border-radius: 5%;padding: 5px 0;">
        已选组合项<br>
        目为空时即<br>
        表示选择所<br>
        有组合项自
      </div> -->
    </div>

    <!--诊断模板-->
    <el-dialog title="诊断模板" :visible.sync="diagnosisTemplateVisble" width="600px" height="400" :show-close="false"
      :close-on-click-modal="false" :append-to-body="true">
      <el-table :data="dict.diagnosisTemplates" border height="350" row-key="id" size="small" highlight-current-row
        @row-click="rowClick" @row-dblclick="rowDblclick" ref="patientList" style="margin-top: -10px;">
        <el-table-column type="index" width="50" label="序号" align="center" />
        <!--
        <el-table-column prop="id" label="编号" width="300">
        </el-table-column>
        -->
        <el-table-column prop="displayName" width="150" label="诊断模板名称" align="center">
        </el-table-column>
        <el-table-column prop="creatorName" width="70" label="创建者" align="center">
        </el-table-column>
        <el-table-column prop="creationTime" label="创建时间" width="160" align="center">
          <template slot-scope="scope">
            {{ moment(scope.row.creationTime).format("yyyy-MM-DD HH:mm:ss") }}
          </template>
        </el-table-column>
        <el-table-column prop="lastModifierName" width="70" label="修改者" align="center">
        </el-table-column>
        <el-table-column prop="lastModificationTime" label="修改时间" width="160" align="center">
          <template slot-scope="scope">
            {{ moment(scope.row.lastModificationTime).format("yyyy-MM-DD HH:mm:ss") }}
          </template>
        </el-table-column>

      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="diagnosisTemplateVisble = false" style="width:90px;">取消</el-button>
        <el-button type="primary" @click="copyDiagnosisTemplate" style="width:90px;">确定</el-button>
      </span>
    </el-dialog>

  </div>
</template>
<script>

import { mapState, mapActions } from "vuex";
import moment from "moment";
import { getapi, postapi, putapi, deletapi } from "@/api/api";
import { dddw, arrayFilter, arrayReduce, arrayExistObj, deepCopy } from "../../utlis/proFunc";


export default {
  components: {

  },
  props: ["patientRegisterForm", "payTypeFlag"],
  data() {
    return {
      itemTypeIds: [], //项目类别

      asbItems: [],     //可被选的 asbItem
      asbItemChoosed: [], //勾选的  未选组合项目

      asbItemOCXChoosed: [], //勾选的  已选组合项目

      asbItemQuick: [],  //可供 快速选择的组合项目
      quickAsb: [],      //快速选择当前显的下拉数据
      asbItemId: '',     //快速选择的组合项目ID

      diagnosisTemplateVisble: false,
      diagnosisTemplateId: '',  //当前选中套餐ID
      packageAsbitems: [], //套餐中包含的组合项目

    };
  },
  computed: {
    ...mapState(["dict", "customerOrg", "patientRegister", "personnelUnit", "diagnosis"]),
  },

  created() {

  },

  mounted() {
    this.dictInit();
    // this.diagnosis.dataAsbitemOCX=[]
    // this.patientRegister.query.StatisticsOCX = ''
  },

  methods: {
    moment, dddw,

    dictInit() {
      getapi('/api/app/diagnosis-template/in-filter')
        .then(res => {
          if (res.code > -1) this.dict.diagnosisTemplates = res.data
        })


      //分析可选组合项目，及快速可选组合项目的数据
      this.parseAsbitem();



    },

    //分析可选组合项目，及快速可选组合项目的数据
    parseAsbitem(v) {
      this.asbItemQuick = deepCopy(this.dict.asbItemAll);
      arrayReduce(this.asbItemQuick, this.diagnosis.dataAsbitemOCX, 'id');
      this.asbItems = deepCopy(this.asbItemQuick);
      if (this.itemTypeIds && this.itemTypeIds.length > 0) {
        this.asbItems = arrayFilter(this.asbItems, 'itemTypeId', this.itemTypeIds[this.itemTypeIds.length - 1])
      }
      if (v) {
        this.$refs.example.toggleDropDownVisible();
      }
    },



    //未选组合项目 勾选情况
    handleSelectionChange(val) {
      // this.selecteddata = val;
      this.asbItemChoosed = val;
      //console.log(this.asbItemChoosed);
    },

    // 添加组合项目
    ///api/app/register-asbitem/many/3fa85f64-5717-4562-b3fc-2c963f66afa6'
    addAbs(asbItemChoosed) {

      if (asbItemChoosed.length < 1) {
        alert("请选择要添加的诊断")
        return
      }
      arrayReduce(this.asbItems, asbItemChoosed, 'id')
      arrayReduce(this.asbItemQuick, asbItemChoosed, 'id')
      // 选模板时，防止重复添加
      let tempArr = []
      asbItemChoosed.forEach(e => {
        if(arrayExistObj(this.diagnosis.dataAsbitemOCX,'id',e.id) < 0) tempArr.push(e)        
      });
      this.diagnosis.dataAsbitemOCX = this.diagnosis.dataAsbitemOCX.concat(tempArr)

      this.btnOk();
    },

    //人员已选组合项目 勾选情况
    selecteditems(val) {
      this.asbItemOCXChoosed = val
    },

    //删除 人员已选中的组合项目
    ///api/app/register-asbitem/many?RegisterAsbitemIds=3fa85f64-5717-4562-b3fc-2c963f66afa6
    delAbs(absForDel) {
      if (absForDel.length < 1) {
        alert("请选择要移除的诊断")
        return
      }
      arrayReduce(this.diagnosis.dataAsbitemOCX, absForDel, 'id');
      this.asbItems = this.asbItems.concat(absForDel)
      this.asbItemQuick = this.asbItemQuick.concat(absForDel)
      this.btnOk();
    },

    //双击删除已选项目
    removeAbs(row) {
      this.delAbs([row]);
    },


    //双击选择组合项目
    dbClickChoosedAsb(row) {
      this.addAbs([row]);
    },

    //快速选择组合项目
    quickChoosedAsb(v) {
      //远程查询时，设置了 value-key 也不管用，只能取到value console.log('quickChoosedAsb',v)
      let lfind = -1
      if (v) {
        lfind = arrayExistObj(this.asbItemQuick, 'id', v)
        if (lfind > -1) {
          this.addAbs([this.asbItemQuick[lfind]])
        }
      }
    },

    //快速选择组合项目时，调整可按拼间简码及简称查找
    remoteMethod(keyWords) {
      //console.log('remoteMethod',this.dict.asbItemQuick)  
      if (keyWords) {
        this.quickAsb = [];
        this.asbItemQuick.forEach(item => {
          if (item.displayName.toLowerCase().indexOf(keyWords.toLowerCase()) > - 1
            || item.simpleCode.toLowerCase().indexOf(keyWords.toLowerCase()) > - 1
            // || item.shortName.toLowerCase().indexOf(keyWords.toLowerCase()) > - 1
          ) {
            this.quickAsb.push(item);
          }
        });
      } else {
        this.quickAsb = deepCopy(this.asbItemQuick);
      }
    },

    //选中诊断模板
    rowClick(row) {
      this.diagnosisTemplateId = row.id
    },

    //双击选诊断模板，并确认复制
    rowDblclick(row) {
      this.copyDiagnosisTemplate()
    },

    //复制诊断模板(确认选中诊断模板)
    copyDiagnosisTemplate() {
      if (!this.diagnosisTemplateId) {
        this.$message.warning({ showClose: true, message: "请先选择诊断模板！" })
        return
      }
      
      // 获取模板的诊断，并添加到已选
      postapi('/api/app/diagnosistemplatedetail/getdiagnosistemplateindiagnosis', { diagnosisTemplateId: this.diagnosisTemplateId })
        .then(res => {
          if (res.code > -1) {       
            this.addAbs(res.data)
            this.diagnosisTemplateVisble = false
          }
        })
    },

    btnOk(closed) {
      if (this.diagnosis.dataAsbitemOCX && this.diagnosis.dataAsbitemOCX.length > 0) {
        switch (this.diagnosis.dataAsbitemOCX.length) {
          case 1:
            this.patientRegister.query.StatisticsOCX = this.diagnosis.dataAsbitemOCX[0].displayName
            break;
          default:
            this.patientRegister.query.StatisticsOCX = this.diagnosis.dataAsbitemOCX[0].displayName + '，… + ' + this.diagnosis.dataAsbitemOCX.length
            break;
        }
      } else {
        this.patientRegister.query.StatisticsOCX = ''
      }

      if (closed) {
        this.diagnosis.dialogAsbitemOCX = false
      }
    }

  },

  //监听事件
  watch: {

  },
};
</script>
<style lang="scss" scoped>
@import "../../assets/css/global.css";

.mainareaBox {
  border: 1px solid #000;
  height: 400px;
  margin-top: 5px;
}

.btnList {
  margin-top: 5px;
  margin-left: 10px;
  margin-right: 10px;
}

.disTotal {
  margin-left: 10px;
}
</style>
<style>
.example .el-cascader-panel .el-radio {
  width: 100%;
  height: 100%;
  z-index: 10;
  position: absolute;
  top: 0px;
  right: 0px;
}

.example .el-cascader-panel .el-radio__input {
  /* margin-top: 10px;
   	margin-left: 8px; 			 */
  display: none;
}

.example .el-cascader-panel .el-cascader-node__postfix {
  top: 10px;
}
</style>