<template>
  <div
    v-if="showAdvice"
    v-drag
    class="diagnoseAdvice-wrap"
  >
    <div class="header">
      <span class="headernum">
        问诊单{{ currentAdvice.diagnoseId }} 诊断建议</span>
      <el-button @click="closeadvice">
        退出
      </el-button>
    </div>
    <div
      v-stopdrag
      class="center"
    >
      <span>诊断建议</span>
      <el-input
        v-model="diagnoseAdvice"
        rows="10"
        maxlength="1000"
        type="textarea"
        placeholder="请输入内容"
      />
    </div>
    <div class="record">
      <span>录音/录像：</span>
      <div
        v-if="
          currentAdvice.adviceAudioUrls != undefined &&
            currentAdvice.adviceAudioUrls.length > 0
        "
      >
        <div
          v-for="itemAudio in currentAdvice.adviceAudioUrls"
          :key="itemAudio.diagnoseId"
        >
          <el-link
            :href="itemAudio"
            target="_blank"
          >
            {{ itemAudio }}
          </el-link>
        </div>
      </div>
      <span
        v-else
        style="color: #0d9078"
      >无音频</span>
    </div>

    <div class="record">
      <span>系统录音/录像：</span>
      <div
        v-if="
          currentAdvice.vodList != undefined && currentAdvice.vodList.length > 0
        "
      >
        <div
          v-for="(itemvod, index) in currentAdvice.vodList"
          :key="index"
        >
          <el-link
            :href="itemvod.url"
            target="_blank"
          >
            {{ itemvod.name }}
          </el-link>
        </div>
      </div>
      <span
        v-else
        style="color: #0d9078"
      >无视频</span>
    </div>

    <div class="record flex">
      <span>诊断建议：</span>
      <div class="record-music">
        <upload-music
          ref="musicComponent"
          :music-list="musicList"
        />
      </div>
    </div>
    <div class="footer">
      <el-button
        type="primary"
        style="height: 35px"
        @click="SaveAdvice"
      >
        提交保存
      </el-button>
    </div>
  </div>
</template>

<script>
  import uploadMusic from '@/components/editor/upload-music';
  import { doctorAdviceCreate } from '@/api/diagnosis';
  import { createNamespacedHelpers } from 'vuex';
  const { mapState } = createNamespacedHelpers('main');
  export default {
    components: {
      uploadMusic,
    },
    directives: {
      drag: {
        // 指令的定义
        bind: function (el) {
          const odiv = el; // 获取当前元素
          el.onmousedown = (e) => {
            // 算出鼠标相对元素的位置
            const disX = e.clientX - odiv.offsetLeft;
            const disY = e.clientY - odiv.offsetTop;
            let left = '';
            let top = '';
            document.onmousemove = (e) => {
              // 用鼠标的位置减去鼠标相对元素的位置，得到元素的位置
              left = e.clientX - disX;
              top = e.clientY - disY;
              // 绑定元素位置到positionX和positionY上面
              // 移动当前元素
              odiv.style.left = left + 'px';
              odiv.style.top = top + 'px';
            };
            document.onmouseup = () => {
              document.onmousemove = null;
              document.onmouseup = null;
            };
          };
        },
      },
      stopdrag: {
        inserted: function (el) {
          const element = el;
          element.onmousedown = function (e) {
            e.stopPropagation();
          };
        },
      },
    },
    props: {
      showAdvice: {
        type: Boolean,
        default: false,
      },
    },
    data() {
      return {
        diagnoseAdvice: '',
      };
    },
    computed: {
      ...mapState({
        currentAdvice: (state) => state.currentAdvice,
      }),
      musicList() {
        const i =
          this.currentAdvice && this.currentAdvice.illnessAudioUrls
            ? this.currentAdvice.illnessAudioUrls
            : [];
        const ni = [];
        i.map((item) => {
          if (item) {
            const n = { url: item };
            ni.push(n);
          }
        });
        return ni;
      },
    },
    watch: {
      showAdvice(newVal, oldVal) {
        if (newVal !== oldVal && newVal) {
          const c = this.currentAdvice && this.currentAdvice.content;
          console.log('ccc=cc=c=c=', c);
          if (c == null) {
            this.diagnoseAdvice = '';
          } else {
            this.diagnoseAdvice = c;
          }
        }
      },
    },
    created() {},
    mounted() {},
    methods: {
      SaveAdvice() {
        if (String(this.diagnoseAdvice).trim() === '') {
          this.$message({
            message: '请填写诊断建议',
            type: 'success',
          });
          return false;
        }
        const url = this.$refs.musicComponent
          ? [...this.$refs.musicComponent.setNewArr()]
          : [];
        const params = {
          adviceAudioUrls: this.currentAdvice.adviceAudioUrls,
          content: this.diagnoseAdvice,
          diagnoseId: this.currentAdvice.diagnoseId, // id需要获取
          illnessAudioUrls: url,
        };
        doctorAdviceCreate(params)
          .then((res) => {
            if (res.code == '000000') {
              this.$message({
                message: '保存成功',
                type: 'success',
              });
              this.closeadvice();
            }
          })
          .catch((err) => {
            console.log(err);
          });
      },
      closeadvice() {
        this.diagnoseAdvice = '';
        this.$store.commit('main/updateShowAdvice', false);
      },
    },
  };
</script>

<style lang="scss">
.diagnoseAdvice-wrap {
  position: absolute;
  top: 125px;
  right: 20px;
  z-index: 1000;
  width: 500px;
  //height: 600px;
  padding: 5px 5px 5px 6px;
  background: #ffffff;
  box-shadow: 10px 10px 50px 0px #d9d9d9;
  overflow: hidden;
  border-radius: 18px;
  .header {
    height: 60px;
    border-bottom: 1px rgb(231, 228, 228) solid;
    display: flex;
    justify-content: space-between;
    padding-left: 15px;
    margin-bottom: 30px;
    .headernum {
      font-weight: 700;
      line-height: 60px;
    }
    .el-button {
      width: 85px;
      height: 25px;
      margin-top: 17px;
      margin-right: 17px;
      line-height: 0;
      border-color: #9fba81;
      color: #9fba81;
      > span {
        font-weight: 700;
      }
    }
  }
  .center {
    display: flex;
    margin-right: 28px;
    margin-bottom: 30px;
    height: 210px;
    > span {
      display: inline-block;
      margin-top: 5px;
      width: 110px;
    }
    .el-textarea {
      height: 110px;
      .el-textarea__inner {
        height: 110px;
      }
    }
  }
  .record {
    padding-left: 28px;
    margin-top: 45px;
  }
  .flex {
    display: flex;
    .record-music {
      flex: 1;
    }
  }
  .footer {
    bottom: 0;
    left: 0;
    text-align: center;
    margin-top: 5px;
  }
}
</style>
