<template>
  <div class="card_formation">
    <div class="order_title1" v-if="list.dept">{{list.dept.name}}</div>
    <div class="order_title">运单号: <span>{{list.waybillNo}}</span></div>
    <div class="order_title" v-if="list.tamperProofLabel">防拆标签码: <span>{{list.tamperProofLabel}}</span></div>
    <div class="order_title">状态 <span :style="{color: filterColor(list)}">{{initDictvalueil(list)}}</span>
    </div>
    <div class="order_title flex_dismantle">
      <div style="display: flex;">复核人:
        <span class="order_name" v-if="list.reCheck">{{list.reCheck.nickName}}</span>
        <span class="order_phone phone_color" v-if="list.reCheck"
          @click="DialProblem(list.reCheck.phone)">{{list.reCheck.phone}}</span>
      </div>
      <span>{{list.senderAddressDetails}}</span>
    </div>
    <div class="order_title">配送人:
      <span class="order_name" v-if="list.delivery">{{list.delivery.nickName}}</span>
      <span class="order_phone phone_color" v-if="list.delivery"
        @click="DialProblem(list.delivery.phone)">{{list.delivery.phone}}</span>
    </div>
    <!-- <div class="order_title">
      <div style="display: flex;align-items: center;">收件人:
        <span class="order_name">{{list.consigneeAddressName}}</span>
        <span class="order_phone">{{list.consigneeAddressPhone}}</span>
      </div>
      <span>{{list.consigneeAddressDetails}}</span>
    </div> -->
    <div class="drug_division">商品信息</div>
    <!-- 药品信息 -->
    <div class="product_card">
      <div class="item_product" v-for="(item,index) in list.drugs" :key="index">
        <div>
          <div class="names_goods">{{item.physic_name}}</div>
          <div class="tag_goods_card">
            <el-tag size="mini">{{item.physic_type_desc}}</el-tag>
          </div>
          <div class="title_goods">包装规格:{{item.pkg_spec_crit}}</div>
          <div class="title_goods">生产厂家:<span>{{item.ent_name}}</span></div>
        </div>
        <!-- <el-image class="goods_image" :src="item.medicinePicture" mode=""></el-image> -->
      </div>
    </div>
    <div class="prescription_title" v-if="list.prescription">处方：</div>
    <div style="margin-bottom: 10px;display: flex;align-items: center;flex-wrap: wrap;" v-if="list.prescription">
      <div v-for="(item1,index1) in list.prescription" :key="index1">
        <el-image style="width: 100px; height: 100px;border-radius: 4px;" :src="item1" :preview-src-list="[item1]">
        </el-image>
      </div>
    </div>
    <div class="order_headline" v-if="list.tamperProofLabelImg">请确定防拆标签完整</div>
    <div class="same_row_in" v-if="list.tamperProofLabelImg">
      <div v-for="(item2,index2) in getimagetamper(list)" :key="index2">
        <el-image class="img_antidismantle" :src="item2" :preview-src-list="[item2]" fit="fill"></el-image>
      </div>
    </div>
    <div class="sign_img" v-if="![1,2,3,5,6].includes(list.status)">
      <div class="title_sign">签收 / 拒收图片</div>
      <el-upload class="sign_image_card" action="#" list-type="picture-card" :file-list="ruleForm.fileList"
        :http-request="(params) => singleUpload(params,'fileList')">
        <i slot="default" class="el-icon-plus"></i>
        <div slot="file" slot-scope="{file}">
          <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
          <span class="el-upload-list__item-actions">
            <!-- <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
              <i class="el-icon-zoom-in"></i>
            </span> -->
            <span class="el-upload-list__item-delete" @click.stop="handleRemove(file)">
              <i class="el-icon-delete" style="font-size: 15px;"></i>
            </span>
          </span>
        </div>
      </el-upload>
    </div>
    <div class="card_evaluate">
      <span class="title_eval">服务评价</span>
      <el-rate v-model="list.assessStar" disabled v-if="![1,2,3,4].includes(list.status)"></el-rate>
      <el-rate v-model="value1" v-else></el-rate>
    </div>
    <div class="card_evaluate">
      <span class="title_eval">评价内容</span>
      <el-input type="textarea" :rows="2" placeholder="评价内容" disabled v-model="list.assessContent"
        v-if="![1,2,3,4].includes(list.status)">
      </el-input>
      <el-input type="textarea" :rows="2" placeholder="评价内容" v-model="textarea" v-else>
      </el-input>
    </div>
    <div class="btn_order" v-if="![1,2,3,5,6,7].includes(list.status)">
      <el-button style="width: 50%;" type="danger" plain @click="getTurnDown">拒绝收货</el-button>
      <el-button style="width: 50%;" type="primary" plain @click="getReceiving">确定收货</el-button>
    </div>
    <custom-modal :is-visible="isModalVisible" @closeModal="closeModal" @getSubmit="getSubmit">
      <!-- 自定义内容 -->
      <template v-slot:header>
        请输入拒收原因
      </template>
      <div>
        <el-input type="textarea" autosize placeholder="请输入原因" v-model="input">
        </el-input>
      </div>
    </custom-modal>
    <custom-modal :is-visible="isModalVisibleil" @closeModal="closeModalil" @getSubmit="getSubmitil">
      <!-- 自定义内容 -->
      <template v-slot:header>
        提示
      </template>
      <div>
        收货时请确认药品防拆标签完好, 是否继续?
      </div>
    </custom-modal>
    <el-dialog width="95%" :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
  import {
    getFileToken,
  } from '@/api/login'
  import {
    WaybillStatus
  } from '@/assets/js/blockSort'
  import CustomModal from './CustomModal.vue';
  export default {
    components: {
      CustomModal
    },
    props: {
      // 轨迹列表
      list: {
        type: Object,
        default: () => {},
      },
    },
    data() {
      return {
        isModalVisible: false,
        url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        input: '',
        dialogImageUrl: '',
        dialogVisible: false,
        ruleForm: {
          fileList: [],
        },
        file: null,
        isModalVisibleil: false,
        value1: null,
        textarea: '',
      }
    },
    methods: {
      getTurnDown() {
        this.isModalVisible = true
      },
      // 收货
      getReceiving() {
        this.isModalVisibleil = true
      },
      closeModal() {
        this.isModalVisible = false
        this.input = ''
        // this.$message({
        //   type: 'info',
        //   message: '已取消'
        // });
      },
      closeModalil() {
        this.isModalVisibleil = false
      },
      // 拒收
      getSubmit() {
        let param = {
          reason: this.input,
          images: '',
          assessStar: this.value1,
          assessContent: this.textarea,
        }
        let arrImg = []
        this.ruleForm.fileList.forEach(item => {
          arrImg.push(item.url)
        })
        param.images = arrImg.join(',')
        this.$emit('getSubmit', param)
      },
      // 收货
      getSubmitil() {
        let images = ''
        let arrImg = []
        this.ruleForm.fileList.forEach(item => {
          arrImg.push(item.url)
        })
        images = arrImg.join(',')
        let param = {
          images: images,
          assessStar: this.value1,
          assessContent: this.textarea,
        }
        this.$emit('getReceiving', param)
      },
      // 单个图片上传
      singleUpload(fileList, value) {
        const loading = this.$loading({
          lock: true,
          text: 'Loading',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        this.file = fileList.file;
        const formData = new FormData();
        formData.append('file', fileList.file);
        getFileToken(formData).then(res => {
          if (res.code == 200) {
            let arr1 = {
              uid: this.file.uid,
              url: '',
            }
            arr1.url = res.data
            this.ruleForm.fileList.push(arr1)
          }
          loading.close();
        }).catch((err) => {
          loading.close();
        })
      },
      // 查看
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      // 删除
      handleRemove(file) {
        const filteredArr = this.ruleForm.fileList.filter(obj => obj.uid !== file.uid);
        this.ruleForm.fileList = filteredArr
        this.$forceUpdate()
      },
      // 普通类型文字匹配
      initDictvalueil(value) {
        let list = WaybillStatus()
        let name = ''
        if (list) {
          list.forEach(item => {
            list.status
            if (value.status === item.value) {
              name = item.label
            }
          })
        }
        return name
      },
      // tag颜色获取
      filterColor(value) {
        let list = WaybillStatus()
        let color = ''
        if (list) {
          list.forEach(item => {
            if (value.status === item.value) {
              color = item.bgcolor
            }
          })
        }
        return color
      },
      getimagetamper(value) {
        if (value.tamperProofLabelImg) {
          let arr = value.tamperProofLabelImg.split(',')
          return arr
        }
      },
      // 拨打电话
      DialProblem(phone) {
        const url = `tel:${phone}`;
        window.location.href = url;
        console.log(phone, 24)
      }
    }
  }
</script>

<style lang="scss" scoped>
  .card_formation {
    text-align: left;
    padding: 15px;
  }

  .order_title1 {
    font-size: 15px;
    margin-bottom: 8px;
    color: #303133;
  }

  .flex_dismantle {
    display: flex;
    flex-direction: column;
  }

  .order_title {
    font-size: 13px;
    margin-bottom: 8px;
    color: #303133;

    span {
      color: #909399;
    }
  }

  .order_name {
    margin-left: 5px;
  }

  .order_phone {
    margin-left: 5px;
  }

  .phone_color {
    color: #ffa900 !important;
  }

  .order_headline {
    font-size: 17px;
    color: #F56C6C;
    font-weight: 600;
    margin-bottom: 5px;
  }

  .img_antidismantle {
    width: 100px;
    height: 100px;
    border-radius: 5px;
    margin-right: 10px;
  }

  .sign_img {
    margin-top: 15px;
    margin-bottom: 15px;
  }

  .title_sign {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 5px;
  }

  .btn_order {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: space-evenly;
  }

  .sign_img ::v-deep .el-upload--picture-card {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100px;
    height: 100px;
  }

  .sign_img ::v-deep .el-upload-list--picture-card .el-upload-list__item {
    width: 100px;
    height: 100px;
    line-height: 1;
  }

  .el-upload-list__item-actions {
    opacity: 1;
    background-color: unset;
  }

  .el-upload-list__item-preview {
    display: flex;
  }

  .el-upload-list__item-actions .el-upload-list__item-delete {
    display: inline-block !important;
    position: absolute;
    top: 0;
    right: 5px;
    color: red;
  }

  .sign_image_card {
    display: flex;
    flex-wrap: wrap;
  }

  .card_evaluate {
    display: flex;
    padding-bottom: 10px;
  }

  .title_eval {
    font-size: 14px;
    margin-right: 10px;
    flex: none;
  }

  .drug_division {
    font-size: 13px;
    font-weight: bold;
    border-bottom: 1px solid #DCDFE6;
    padding-bottom: 5px;
  }

  .prescription_title {
    font-size: 13px;
    margin-bottom: 5px;
  }

  .product_card {
    border-radius: 5px;
    background-color: #fff;
    // box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    margin-bottom: 15px;
  }

  .item_product {
    display: flex;
    padding: 15px 10px 10px 10px;
    border-bottom: 1px solid #DCDFE6;
  }

  .goods_image {
    flex: none;
    width: 90px;
    height: 75px;
    border-radius: 5px;
  }

  .names_goods {
    font-size: 17px;
    font-weight: bold;
  }

  .tag_goods_card {
    display: flex;
    padding-top: 5px;
  }

  .title_goods {
    color: #606266;
    font-size: 13px;
    padding-top: 5px;
  }
</style>
