// 适宜技术处方
<template>
  <div id="suitScience">
    <!-- 中成药方 和适宜技术处方 -->
    <div class="chinese_medicine">
      <div class="flex flex-row-right">
        <div class="clearer flex-center" @click="clear();$emit('clear')">清空</div>
      </div>
      <!-- 中成药 -->
      <!-- fixed="left" -->

      <div class="table-container">
        <div class="table-show flex-vertical-between flex-wrap">
          <div class="table-left">
            <el-table :data="listLeft" border style="width:100%;">
              <el-table-column prop="id" label="序号" fixed="left" width="50"></el-table-column>
              <el-table-column prop="name" label="穴位">
                <template slot-scope="scope">
                  <!-- <el-input v-model="scope.row.name" size="mini"></el-input> -->
                  <div class="xuewei">
                    <el-select
                      :id="'xuwei'+scope.row.id"
                      size="mini"
                      remote
                      :value="scope.row.name"
                      filterable
                      placeholder="请选择" :disabled="!editable"
                      @change="acunameC($event,scope)"
                      :filter-method="filterMethod"
                    >
                      <el-option
                        :label="item.acuname"
                        :value="item.acuid"
                        v-for="(item,index) in acupointList"
                        :key="index"
                      ></el-option>
                    </el-select>
                  </div>
                </template>
              </el-table-column>

              <el-table-column label="操作" width="100">
                <template slot-scope="scope" v-if="scope.row.name">
                  <div class="operate">
                    <img v-if="editable" src="../assets/add.png" alt @click="addData(scope)" />
                    <img v-if="editable" src="../assets/delete1.png" alt @click="deleteData(scope)" />
                    <img src="../assets/find.png" alt @click="find(scope)" />
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
          <div class="table-left">
            <el-table :data="listRight" border style="width:100%;">
              <el-table-column prop="id" label="序号" fixed="left" width="50"></el-table-column>
              <el-table-column prop="name" label="穴位">
                <template slot-scope="scope">
                  <!-- <el-input v-model="scope.row.name" size="mini"></el-input> -->
                  <div class="xuewei">
                    <el-select
                      :id="'xuwei'+scope.row.id"
                      size="mini"
                      remote
                      :value="scope.row.name"
                      filterable
                      placeholder="请选择" :disabled="!editable"
                      @change="acunameC($event,scope)"
                      :filter-method="filterMethod"
                    >
                      <el-option
                        :label="item.acuname"
                        :value="item.acuid"
                        v-for="(item,index) in acupointList"
                        :key="index"
                      ></el-option>
                    </el-select>
                  </div>
                </template>
              </el-table-column>

              <el-table-column label="操作" width="100">
                <template slot-scope="scope" v-if="scope.row.name">
                  <div class="operate">
                    <img v-if="editable" src="../assets/add.png" alt @click="addData(scope)" />
                    <img v-if="editable" src="../assets/delete1.png" alt @click="deleteData(scope)" />
                    <img src="../assets/find.png" alt @click="find(scope)" />
                  </div>
                </template>
              </el-table-column>
            </el-table>
          </div>
        </div>
        <!-- 底部处方 -->
        <div class="table-bottom">
          <div class="table-b-header">
            <div class="flex-vertical-center-l header-about flex-wrap" v-if="container_i==2">
              <div class="item flex-vertical-center-l">
                <span>类型：</span>
                <div class="div2">
                  <el-select
                    size="mini"
                    v-model="bottom_form.doseType1"
                    placeholder="请选择"
                    @change="doseType1C"
                  >
                    <el-option
                      :label="item.value[0]"
                      :value="item.key"
                      v-for="(item,index) in typeList"
                      :key="index"
                    ></el-option>
                  </el-select>
                </div>
              </div>
              <div class="item flex-vertical-center-l">
                <span>次数：</span>
                <div class="div1">
                  <el-input
                    size="mini"
                    @change="countPrice()"
                    placeholder="请输入 "
                    v-model="bottom_form.doseNum1"
                  ></el-input>
                </div>
              </div>
            </div>
            <div v-if="container_i==2" class="header-about">
              <div class="item flex-vertical-center-l" style="align-items:flex-start;">
                <span>操作指南：</span>
                <div style="flex:1;">
                  <el-input
                    size="mini"
                    placeholder="请输入"
                    v-model="bottom_form.caozuo"
                    type="textarea"
                    autosize
                  ></el-input>
                </div>
              </div>
            </div>
            <div class="header-about">
              <div class="item flex-vertical-center-l">
                <span>嘱托：</span>
                <div style="flex:1;">
                  <el-input size="mini" placeholder="请输入" v-model="bottom_form.zhutuo"></el-input>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 留在这个页面 -->
    <div class="table-b-bottom flex-vertical-between">
      <div class="t-b-b-left flex-vertical-center-l flex-wrap">
        <div class="t-b-l-item">
          当前处方金额:
          <span>{{nowMoney}}元</span>
        </div>

        <div class="t-b-l-item">
          合计费用:
          <span>{{allMoney}}元</span>
        </div>
      </div>
      <div class="t-b-b-right flex-vertical-center-r">
        <!-- <div class="flex-center bg-green" @click="submit()" v-if="showSubmit">提交处方</div> -->
        <template v-if="isAutoCheck==0">
          <el-button
            type="primary"
            size="mini"
            @click="submit()"
            v-if="editable"
          >保存处方</el-button>
        </template>

        <template v-if="isAutoCheck==1">
          <el-button
            type="primary"
            size="mini"
            @click="submit()"
            v-if="editable"
          >保存处方</el-button>
        </template>
      </div>
    </div>
  </div>
</template>
<script>
import { getXueweiList } from "@/api/knowledge.js";
import { getSelectType } from "@/api/city.js";
import { mapGetters } from "vuex";
import { getDataByKey } from "@/api/system.js";
export default {
  props: {
    container_i: {
      type: Number,
      default: 2
    },
    showSubmit: {
      type: Boolean,
      default: true
    }
  },
  computed: {
    editable() {
      switch (+this.isAutoCheck) {
        case 0:
          /**
           * v-if="isAutoCheck==0"
           * v-if="prescribed==0 || !prescribed"
           * 保存处方
           */
          return +this.prescribed === 0
        case 1:
          /**
           * v-if="isAutoCheck==1"
           * v-if="paystate==0 || !paystate"
           * 保存处方
           */
          return +this.paystate === 0
        default:
          return false
      }
    },
    saveable() /* 父组件 获取 */ {
      return this.editable && this.tableData4.some(item => item.name)
    },
    ...mapGetters(["getuserinfo", "getPatiensInfo"])
  },
  data() {
    return {
      isMyMade: true,
      prescribed: 0,
      isAutoCheck: "0", // 是否自动审核 0 手动 1自动 (自动的时候用his 的是否支付成功字段 判断显示)
      paystate: 0, // 云his 是否支付  0 否 1是(为否可以编辑)
      name: "适宜技术处方",
      recipeId: "", // 当前选择的处方 id（推荐方剂）
      tableData4: [
        {
          id: 1,
          name: "",
          acuname: "",
          acuid: ""
        }
      ],
      listLeft: [],
      listRight: [],
      nowMoney: 0,
      allMoney: 0,
      isPay: false,

      // 底部表单
      bottom_form: {
        doseNum: "",
        doseType: "",
        usege: "",
        num: "",
        daijian: "",
        nongjian: "",
        time: "",
        caozuo: "",
        zhutuo: "",
        radio: 1,
        pro: "",
        city: "",
        area: "",
        address: "",
        phone: "",
        doseType1: "",
        doseNum: ""
      },
      caozuoArr: [],
      typeList: [],
      acupointList: [] // 穴位列表
    };
  },
  created() {
    this.getSelectType();
    this.getXueweiList();
    this.getDataByKey();
  },
  watch: {
    getuserinfo: {
      deep: true,
      immediate: true,
      handler() {
        if (this.getuserinfo.organizationid) {
          this.getDataByKey("automaticReview");
        }
      }
    },
    tableData4: {
      handler: function() {
        this.listLeft = this.tableData4.filter(item => {
          return item.id % 2 != 0;
        });
        this.listRight = this.tableData4.filter(item => {
          return item.id % 2 == 0;
        });
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    doseType1C(e) {
      this.typeList.forEach(item => {
        if (item.key == e) {
          this.bottom_form.doseType = item.value[1];
        }
      });
      this.countPrice();
    },
    //清空处方
    clear() {
      if (!this.editable) {
        this.$message.warning("已支付处方不可以清空");
        return;
      }
      this.isMyMade = true;
      this.tableData4 = [
        {
          id: 1,
          name: "",
          acuname: "",
          acuid: ""
        }
      ];

      this.nowMoney = "";
      this.allMoney = "";
      this.bottom_form = {
        doseNum: "",
        doseType: "",
        usege: "",
        num: "",
        daijian: "",
        nongjian: "",
        time: "",
        caozuo: "",
        zhutuo: "",
        radio: 1,
        pro: "",
        city: "",
        area: "",
        address: "",
        phone: "",
        doseType1: "",
        doseNum: ""
      };
      this.caozuoArr = [];
    },
    find(scope) {
      this.$emit("find", scope);
    },
    filterMethod(e) {
      let pinyin = /^[A-Za-z]+$/g;
      if (pinyin.test(e)) {
        this.getXueweiList(e, "1");
      } else {
        this.getXueweiList(e, "");
      }
    },
    submit() {
      this.$emit("submit");
    },
    acunameC(e, scope) {
      let isRepeat = false;
      let index = scope.row.id - 1;
      this.tableData4.forEach(item => {
        if (item.acuid == e) {
          this.$message({
            message: "穴位不可重复选择",
            type: "error",
            showClose: false
          });
          isRepeat = true;
        }
      });
      if (isRepeat) {
        this.tableData4[index].name = "";
        return;
      }
      let _self = this;
      const tag = "\u2060:\u2060"
      const merge = !this.bottom_form.caozuo || this.bottom_form.caozuo.includes(tag)
      this.acupointList.forEach(item => {
        if (item.acuid == e) {
          _self.tableData4[index].acuname = item.acuname;
          _self.tableData4[index].name = item.acuname;
          _self.tableData4[index].acuid = item.acuid;

          if (merge && item.acuoperation) _self.bottom_form.caozuo +=
            item.acuname + tag + item.acuoperation + " ";
        }
      });

      this.addData(scope);
      // this.countPrice();
    },
    // 计算价格
    countPrice() {
      let arr = this.tableData4.filter(item => {
        return item.name != "";
      });
      let price = this.typeList.filter(item => {
        return item.key == this.bottom_form.doseType1;
      });

      console.log(price);
      if (!Array.isArray(price) || price[0] == null) return

      let num = this.bottom_form.doseNum1
        ? Number(this.bottom_form.doseNum1)
        : 0;

      this.nowMoney = price[0].value[1] * num;
      this.allMoney = price[0].value[1] * num;
      this.nowMoney = this.nowMoney.toFixed(2);
      this.allMoney = this.allMoney.toFixed(2);
      this.$emit("update:totalAllMoney", this.allMoney);
    },
    // 添加数据
    addData(scope) {
      // let index = scope.$index;
      let index = scope.row.id - 1;
      let tableData4 = this.tableData4;
      if (index == this.tableData4.length - 1) {
        this.tableData4.push({
          id: 1,
          name: "",
          acuname: "",
          acuid: ""
        });
      } else {
        let data = this.tableData4.splice(scope.row.id);

        tableData4.push({
          id: 1,
          name: "",
          acuname: "",
          acuid: ""
        });
        tableData4 = tableData4.concat(data);

        this.tableData4 = tableData4;
      }
      this.getXueweiList("", "");
      this.tableData4.filter((item, index) => {
        return (item.id = index + 1);
      });
      // document.getElementById('xuwei' + scope.row.id).focus()
      setTimeout(() => {
        console.log(
          document.querySelectorAll("#xuwei" + (scope.row.id + 1))[0],
          "lalal"
        );
        document.querySelectorAll("#xuwei" + (scope.row.id + 1))[0].focus();
        // document.querySelectorAll('#xuwei' + (scope.row.id + 1))[0].style.borderColor = 'red'
      }, 200);
    },
    // 删除一条数据
    deleteData(scope) {
      let index = scope.row.id - 1;
      if (index == 0 && this.tableData4.length == 1) return;

      this.tableData4.splice(index, 1);
      let arr = this.bottom_form.caozuo.split(" ");
      arr.forEach((item, index) => {
        if (item.indexOf(scope.row.name) !== -1) {
          arr.splice(index, 1);
        }
      });

      this.bottom_form.caozuo = arr.join(" ");
      this.tableData4.filter((item, index) => {
        return (item.id = index + 1);
      });

      this.countPrice();
    },
    // 获取剂型
    async getSelectType() {
      let res = await getSelectType("类型");
      if (res.ResultCode == 0) {
        res.Data.forEach(item => {
          item.value = item.value.split("-");
        });
        this.typeList = res.Data;
      }
    },
    // 获取穴位数据
    async getXueweiList(key = "", serchtype = "") {
      let params = {
        pageid: 1,
        pagesize: 999,
        serchtype: serchtype,
        keyword: key
      };
      let res = await getXueweiList(params);
      if (res.code == 0) {
        this.acupointList = res.data.acupoints;
      }
    },
    // 获取医共体计算方式配置
    async getDataByKey(key = "automaticReview") {
      /*
        countMenthod:计费方式
        automaticReview:是否开启自动审核
      */

      let res = await getDataByKey({
        key: key,
        organizationid: this.getuserinfo.organizationid
      });
      if (res.ResultCode == 0) {
        if (key == "countMenthod") {
          if (res.ResultInfo == "0") {
            this.countWay = "1";
          } else if (res.ResultInfo == "1") {
            this.countWay = "2";
          } else if (res.ResultInfo == "2") {
            this.countWay = "3";
          }
        }

        if (key == "automaticReview") {
          this.isAutoCheck = res.ResultInfo;
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
@import "../style/common.scss";

.chinese_medicine {
  padding: 5px 5px;

  .clearer {
    width: 84px;
    height: 28px;
    background: #ffae45;
    border-radius: 4px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: bold;
    color: #ffffff;
    cursor: pointer;
    margin-bottom: 5px;
    // float: right;
  }
}

.center-table {
  border: 2px solid #dedede;
  padding: 7px 0 0;
  // min-height: 600px;
  // position: relative;

  .table-header {
    padding-bottom: 7px;
    border-bottom: 2px solid #dedede;

    .table-label {
      .label-item {
        cursor: pointer;
        width: 134px;
        border-right: 2px solid #eaeaea;

        div {
          color: #666;
          transform: rotate(45deg);
          font-size: 28px;
          margin-left: 12px;
          margin-top: 1px;
        }
      }

      span {
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #666666;
      }

      .l_active {
        color: #5386f6;
      }
    }
  }

  .add-presc {
    width: 70px;
    height: 26px;
    background: #ffae45;
    border-radius: 4px;
    font-size: 12px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
    cursor: pointer;
    margin-right: 20px;
  }

  .table-container {
    padding: 0px 0px;

    height: 340px;
    overflow: auto;
  }

  .table-show {
    width: 100%;
    min-height: 212px;
    overflow: auto;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    // background: #5386F6;
    // overflow: hidden;

    .table-left-body {
      width: 49.9%;
      position: relative;
      perspective: 100px;
      padding-bottom: 10px;
    }

    .table-left {
      // width: 100%;
      flex: 0 0 49.9%;
      overflow-y: auto;
      border: 1px solid #dedede;
      box-sizing: border-box;

      .table-l-hader {
        white-space: nowrap;

        div {
          display: inline-block;
          // padding: 15px 10px;
          background: #f3fffb;
          text-align: center;
          height: 48px;
          line-height: 48px;
          border: 1px solid #dedede;
          border-bottom: 0 !important;
          // border-top: 0 !important;
        }

        .med-name {
          margin-left: 50px;
        }

        .kucun {
          padding-right: 120px;
        }

        .fixed-r {
          position: fixed;
          right: 0;
        }

        .fixed-left {
          position: fixed;
          left: 0;
        }
      }

      .table-l-item {
        white-space: nowrap;

        .bg-green {
          .div1 {
            background: #f3fffb;
            border: 1px solid #dedede;
          }
        }

        .div1 {
          display: inline-block;
          // padding: 15px 10px;
          background: #ffffff;
          text-align: center;
          height: 53px;
          line-height: 53px;
          border: 1px solid #dedede;
          z-index: 9999;
          border-top: 0 !important;
        }

        .med-name {
          margin-left: 50px;
        }

        .kucun {
          padding-right: 120px;
          border-right: 1px solid #dedede;
        }

        .fixed-r {
          position: fixed;
          right: 0;
        }

        .fixed-left {
          position: fixed;
          left: 0;
          // border-left: 1px solid #DEDEDE;
        }

        .no-data {
          width: 100%;
          box-sizing: border-box;
          // border-top: 1px solid #DEDEDE;
          position: relative;
          left: 0;
          right: 0;
          bottom: 0px;
          // float: left;
        }
      }
    }
  }

  .operate {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-around;

    img {
      width: 16px;
    }
  }

  .bottom-input {
    background: #fff;
    padding: 12.5px 30px 12.5px 52px;
    position: relative;
    // z-index: 999;
    // perspective: 100px;

    .div {
      width: 154px;
    }

    .table-choose {
      z-index: 9999;
      width: 332px;
      height: 221px;
      background: #ffffff;
      border: 2px solid #d8d8d8;
      position: relative;
      top: 2px;
      left: -48px;
      overflow: auto;

      .table-choose-h {
        background: #f3fffb;

        div {
          height: 36px;
          width: 73px;
        }

        div:first-child {
          width: 115px;
        }
      }

      .t-c-b {
        cursor: pointer;

        .td {
          background: #f3fffb;
        }

        p {
          border: 1px solid #ededed;
          height: 36px;
          width: 73px;
          // flex: 1;
          box-sizing: border-box;
        }

        p:first-child {
          width: 115px;
        }
      }
    }
  }

  .table-bottom {
    // position: absolute;
    // bottom: 0;
    // right: 0;
    // left: 0;\
    padding: 0 5px;
    // margin-top: 241px;
    margin-top: 5px;

    .header-about {
      .item {
        margin-right: 20px;
        margin-bottom: 10px;

        span {
          font-size: 16px;
          font-family: PingFang SC;
          font-weight: 400;
          color: #333333;
        }

        .div1 {
          width: 120px;
        }

        .div2 {
          width: 74px;
        }

        .city1 {
          width: 120px;
        }

        .div3 {
          width: 92px;
        }

        .div4 {
          width: 160px;
        }

        .input-suffix {
          line-height: 36px;
        }
      }

      .right {
        width: 70px;
        height: 26px;
        background: #ffae45;
        border-radius: 4px;
        font-size: 14px;
        font-family: PingFang SC;
        font-weight: 400;
        color: #ffffff;
        margin-bottom: 10px;
        cursor: pointer;
      }
    }
  }

  .table-b-bottom {
    padding: 5px 5px;
    border-top: 2px solid #dedede;
    margin-top: 5px;

    .t-b-l-item {
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #333333;
      margin-right: 10px;

      span {
        color: #ff6245;
      }
    }

    .t-b-b-right {
      div {
        width: 130px;
        height: 28px;
        background: #ffae45;
        border-radius: 4px;
        font-size: 16px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #ffffff;
        cursor: pointer;
      }

      .bg-green {
        background: #5386f6;
        margin-left: 20px;
      }
    }
  }

  // 中成药 和适宜技术配方
}

.operate {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-around;

  img {
    width: 16px;
  }
}

.bottom-input {
  background: #fff;
  padding: 12.5px 30px 12.5px 52px;
  position: relative;
  // z-index: 999;
  // perspective: 100px;

  .div {
    width: 154px;
  }

  .table-choose {
    z-index: 9999;
    width: 332px;
    height: 221px;
    background: #ffffff;
    border: 2px solid #d8d8d8;
    position: relative;
    top: 2px;
    left: -48px;
    overflow: auto;

    .table-choose-h {
      background: #f3fffb;

      div {
        height: 36px;
        width: 73px;
      }

      div:first-child {
        width: 115px;
      }
    }

    .t-c-b {
      cursor: pointer;

      .td {
        background: #f3fffb;
      }

      p {
        border: 1px solid #ededed;
        height: 36px;
        width: 73px;
        // flex: 1;
        box-sizing: border-box;
      }

      p:first-child {
        width: 115px;
      }
    }
  }
}

.collapse ::v-deep .el-collapse-item__content {
  padding-bottom: 5px;
}

.c-m-table::v-deep .el-table .cell {
  text-align: center;
}

.table-show::v-deep .el-table .cell {
  text-align: center;
}

.c-m-table::v-deep .el-select input {
  padding: 0 15px 0 5px;
}

.table-show ::v-deep .el-select input {
  padding: 0 15px 0 5px;
}

.t_dose::v-deep .el-input__inner {
  // text-align: left;
  padding: 0 5px !important;
}

.city::v-deep .el-select input {
  padding: 0 20px 0 10px;
  // height: 32px;
}

.xuewei::v-deep .el-select {
  width: 100%;
}

.header-about::v-deep .el-input.is-disabled .el-input__inner {
  color: #000000;
}

.table-show::v-deep .el-table {
  // z-index: 999;
}

.table-show::v-deep .el-table th {
  padding: 2px 0;
}

.table-show::v-deep .el-table td {
  padding: 2px 0;
}

.table-show .table-left::v-deep .el-table__empty-block {
  min-height: 33px !important;
  height: 33px !important;
}
</style>
<style lang="scss" scoped>
@media screen and (max-width: 768px) {
  .center-table .chinese_medicine .clearer {
    height: 24px;
  }

  .table-show ::v-deep .el-table th {
    font-size: 12px;
  }

  .table-show ::v-deep .el-table td {
    font-size: 12px;
  }

  .center-table .table-bottom .header-about .item span {
    font-size: 12px;
  }

  .center-table .table-b-bottom .t-b-l-item {
    font-size: 12px;
  }

  .center-table .table-container {
    height: 440px;
  }

  .center-table .table-show {
    min-height: 319px;
  }
}
</style>