<template>
  <div class="code">
    <div>
      <el-button size="mini" type="primary" @click="save()">保存</el-button>
      <el-select style="margin-left: 8px;" size="mini" placeholder="医疗机构"
                 filterable clearable
                 v-model="query.hospitalCode" @change="load($event)">
        <el-option v-for="item in medSelectList" :key="item.pid" :label="item.name" :value="item.pid"></el-option>
      </el-select>
    </div>
    <div
      class="rules"
    >输入规则:key 和 value 用 # 分割 例: 0#熏蒸 多个用 / 分割 例:0#熏蒸/1#煎服/2#坐浴 价格用-拼接 例:0#熏蒸-10/1#煎服-20/2#坐浴-30</div>

    <div class="code-item flex-vertical-center-l" v-for="(item,index) in list" :key="index">
      <div class="span">
        <span>{{item.type}}：</span>
      </div>
      <div class="input">
        <el-input v-model="item.value" type="textarea"></el-input>
      </div>
    </div>
    <el-transfer class="medSelectList-transfer"
                 :titles="['可选医疗机构', '配置医疗机构']"
                 :data="medSelectList" :props="{key: 'pid',label: 'name'}"
                 v-model="selected" filterable
    />
    <div class="code-item flex-vertical-center-l">
      <div class="span">
        <!-- <span>频次：</span> -->
      </div>
      <!-- <div class="input">
                <div class="save flex-center">保存</div>
      </div>-->
    </div>

    <!-- <div class="save flex-center">保存</div> -->
  </div>
</template>
<script>
import {getCodeMsg, addCodeMsg, getMedSelect, getMedlist} from '@/api/system.js';
import {mapGetters} from 'vuex';
export default {
  data() {
    return {
      query: {hospitalCode: null},
      medSelectList: [],
      selected: [],

      list: [],
      sign: ""
    };
  },
  created() {
    this.init();
  },
  computed: {
    ...mapGetters(['getuserinfo']),
  },
  methods: {
    async init() {
      let organizationId = (() => { try { return this.getuserinfo.organizationid; } catch (e) { return void 0; } })();
      try {
        if (!organizationId) {
          const res = await getMedSelect({organizationId});
          if (res.ResultCode !== 0) throw {message: res.ResultInfo};
          this.medSelectList = Array.isArray(res.Data) ? res.Data : [];
        } else {
          const res = await getMedlist({page: 1, pageSize: 100});
          if (res.ResultCode !== 0) throw {message: res.ResultInfo};
          this.medSelectList = res.Data && Array.isArray(res.Data.Items) ? res.Data.Items : [];
        }
      } catch (e) {
        this.medSelectList = [];
      }
      if (this.query.hospitalCode && !this.medSelectList.find(item => item.pid === this.query.hospitalCode)) { this.query.hospitalCode = ''; }
      await this.load(this.query.hospitalCode);
    },
    async load(hospitalCode) {
      try {
        const res = await getCodeMsg({hospitalCode: hospitalCode || '0'});
        if (res.ResultCode !== 0) throw {message: res.ResultInfo};
        this.list = Object.entries(res.Data).map(([type, value]) => ({type, value}));
      } catch (e) {
        this.list = [];
      }
      if (hospitalCode && hospitalCode !== '0') { this.selected = [hospitalCode]; }
    },


    save() {
      if (!this.selected.length) {
        this.$message.warning("请至少配置一项医疗机构")
        const hospitalCode = this.query.hospitalCode
        if (hospitalCode && hospitalCode !== '0') { this.selected = [hospitalCode]; }
        return;
      }
      this.addCodeMsg();
    },
    // 提交公共代码信息
    async addCodeMsg() {
      let params = {
        paramList: this.list,
        hospitalCodes: this.selected,
      };
      const loading = this.$loading({
        lock: true,
        text: "正在提交",
        spinner: "el-icon-loading",
        background: "rgba(0, 0, 0, 0.7)"
      });

      let res = await addCodeMsg(params).catch(err => {
        loading.close();
      });
      if (res.ResultCode == 0) {
        loading.close();
        this.$message({
          type: "success",
          showClose: true,
          message: "提交成功"
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.medSelectList-transfer {
  display: flex;

  ::v-deep {
    .el-transfer-panel {
      flex: 2;
    }

    .el-transfer__buttons {
      align-self: center;
    }
  }
}
</style>
<style lang="scss" scoped>
@import "../../style/common.scss";

.code {
  padding: 10px 10px;
  background: #fff;
  border-radius: 5px;
  height: 100%;
  overflow: auto;
  box-sizing: border-box;

  .code-item {
    margin-bottom: 10px;

    .span {
      // display: inline-block;
      width: 150px;
      text-align: right;
    }
  }

  .save {
    width: 76px;
    height: 36px;
    background: #5386f6;
    border-radius: 4px;
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
    cursor: pointer;
    // margin-left: 30px;
  }
}

.input {
  flex: 1;
}

.rules {
  color: red;
  margin-bottom: 10px;
  margin-top: 10px;
}
</style>