<template>
  <div class="eventInformation" @click="showModal(model)">
    <div class="head">
      <p>
        <span>{{ model.consumableName }}{{ model.consumableBrandModel }}</span>
        <span class="textRight">单价：<strong class="fontBold">{{ model.consumableEndPrice }}元</strong></span>
      </p>
    </div>
    <p>
      <span class="fl"></span>
      <span class="fr"><strong class="fontBold">×{{ model.consumablesNum }}</strong>&emsp;&emsp;<span class="totalPrice">总价：<strong class="fontBold">{{model.consumablesNum * model.consumableEndPrice}}元</strong></span></span>
    </p>
    <!-- 弹窗 -->
    <showModel
      v-if="models.disjunctor"
      :title="models.title"
      :icon="models.icon"
      :disjunctor="models.disjunctor"
      @ok="ok"
      @cancel="cancel"
      @remove="remove"
      :operate="models.operate"
      selectName="hc_edit"
      :data="hcData"
    ></showModel>
  </div>
</template>

<script>
import showModel from "../showModel/showModel.vue";
export default {
  name: "ConsumableMaterial",
  data() {
    return {
      hcData: {},
      loadShow: true,
      // 弹窗model
      models: {
        disjunctor: false
      },
    };
  },
  props: ["model", "id", "summaryId", "incidentId", "noClick"],
  components: {
    showModel,
  },
  methods: {
    // 移除
    remove(data) {
      console.log(data);
      const toast = this.$createToast({
        txt: "Loading...",
        mask: true
      });
      toast.show();
      this.$http
        .post("service/bpm/data/addSummaryDoc", {
            "consumableList": [
                {
                    "consumablesId": data.hc.id,
                    "consumablesNum": data.consumablesNum
                }
            ],
            "summaryId": this.summaryId,
            "remove": 'remove',
        })
        .then(res => {
          toast.hide();
          this.models.disjunctor = false;
          if (res.data.status == 200) {
            this.$createDialog({
              type: "alert",
              title: "操作成功",
              icon: "cubeic-right",
              onConfirm: (e, promptValue) => {
                this.loadShow = false;
                this.$emit("refresh");
              }
            }).show();
          } else {
            this.$createDialog({
              type: "alert",
              title: "系统错误,请稍后再试!",
              icon: "cubeic-wrong",
              onConfirm: (e, promptValue) => {
                this.loadShow = false;
                this.$emit("refresh");
              }
            }).show();
          }
        });
    },
    //确定
    ok(data) {
      console.log(data);
      const reg = /(^[1-9][0-9]*$)/;
      if(!reg.test(data.consumablesNum)){
          this.$createDialog({
            type: "alert",
            title: "请输入大于0的正整数!",
            icon: "cubeic-warn"
          }).show();
          return;
      }
      const toast = this.$createToast({
        txt: "Loading...",
        mask: true
      });
      toast.show();
      this.$http
        .post("service/bpm/data/addSummaryDoc", {
            "consumableList": [
                {
                    "consumablesId": data.hc.id,
                    "consumablesNum": data.consumablesNum
                }
            ],
            "summaryId": this.summaryId,
            "modifyNum": 'edit',
        })
        .then(res => {
          toast.hide();
          this.models.disjunctor = false;
          if (res.data.status == 200) {
            this.$createDialog({
              type: "alert",
              title: "操作成功",
              icon: "cubeic-right",
              onConfirm: (e, promptValue) => {
                this.loadShow = false;
                this.$emit("refresh");
              }
            }).show();
          } else {
            this.$createDialog({
              type: "alert",
              title: "系统错误,请稍后再试!",
              icon: "cubeic-wrong",
              onConfirm: (e, promptValue) => {
                this.loadShow = false;
                this.$emit("refresh");
              }
            }).show();
          }
        });
    },
    //取消
    cancel() {
      this.models.disjunctor = false;
    },
    // 弹窗
    showModal(item) {
      if(this.noClick){
        return;
      }
      console.log(item)
      this.modelsData = item;
      this.hcData = {
        hc: {
          endPrice: item.consumableEndPrice,
          brandModel: item.consumableBrandModel,
          name: item.consumableName,
          id: item.consumableId,
        },
        incidentId: this.incidentId,
        summaryId: this.summaryId,
        consumablesNum: item.consumablesNum,
      }
      this.models = {
        disjunctor: true,
        title: "提示",
        icon: "warn",
        operate: {
          ok: "确定",
          cancel: "取消",
          remove: '移除'
        }
      };
    },
  },
  created() {
    console.log(this.model);
  }
};
</script>

<style lang="less" scoped>
.eventInformation {
  .totalPrice{
    display: inline-block;
    width: 2rem;
    text-align: right;
  }
  .boeder_B {
    border-bottom: 0.01rem solid #ccc;
  }
  .shows {
    display: none;
  }
  .head {
    border-bottom: 0.01rem solid #e6e6e6;
    p {
      padding: 0.24rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      i {
        color: #00559d;
      }
      span {
        flex: 1;
        flex-shrink: 0;
        width: 50%;
        &.textRight{
          text-align: right;
        }
      }
    }
  }
  p {
    line-height: 0.4rem;
    padding: 0.1rem 0.24rem;
    overflow: hidden;
    .overflowEllipsis2 {
      margin-left: 1.96rem;
    }
  }
  .info_hide {
    padding: 0.2rem 0.24rem;
    border-bottom: 0.01rem solid #e6e6e6;
    .hide {
      color: #00559d;
    }
  }
  .imgs-container {
    a {
      color: #03c !important;
      &:visited {
        color: #551a8b !important;
      }
    }
    img {
      width: 1.5rem;
      height: 1.5rem;
      margin-right: 0.7rem;
      &:nth-child(1) {
        margin-left: 0.75rem;
      }
    }
  }
  .progress {
    padding: 0.2rem 0.2rem;
    overflow: hidden;
    transition-duration: 0.2s;
    transition-timing-function: linear;
    &.progressHide {
      height: 1.7rem;
    }
    .progress_info {
      overflow: hidden;
      margin-bottom: 0.1rem;
      &:nth-last-child(1) {
        .cont {
          border: none !important;
        }
      }
      .progress_info_L {
        float: left;
        color: #333;
        max-width: 18%;
      }
      .progress_info_R {
        float: right;
        margin-left: 0.09rem;
        width: 80%;
        font-size: 0.25rem;
        .time {
          i {
            margin-left: -0.15rem;
            &.icon-icon_weizuo {
              color: #005495;
            }
            &.icon-icon_zhengzaijinx {
              color: #48a843;
              font-size: 0.37rem;
            }
          }
          span {
            margin-left: 0.15rem;
          }
        }
        .cont {
          border-left: 1px solid #999;
          padding-left: 0.4rem;
          min-height: 0.4rem;
          &.blue {
            border-left: 1px solid #005395;
          }
        }

        .text1 {
          font-size: 0.15rem;
        }
        .text2 {
          color: #666;
          word-break: break-all;
        }
        p {
          padding: 0;
        }
      }
    }
  }
}
</style>
