
<template>
    <el-dialog
      :visible.sync="showDialog"
      :title="title"
      :modal-append-to-body="false"
      style="text-align: left;"
      @close="closeDialog"
      :close-on-click-modal="false"
      width="1500px"
    >
      <div class="user-panel" v-loading="loading">
        <el-descriptions title="基本信息">
          <el-descriptions-item label="工单号">{{formModel.number}}</el-descriptions-item>
          <el-descriptions-item label="标题">{{formModel.title}}</el-descriptions-item>
          <el-descriptions-item label="地址">{{formModel.address}}</el-descriptions-item>
          <el-descriptions-item label="日期">{{formModel.date}}</el-descriptions-item>
          <el-descriptions-item label="报价">{{formModel.price}}</el-descriptions-item>
          <el-descriptions-item label="支付状态">{{formModel.payStatusN}}</el-descriptions-item>
      </el-descriptions>
      </div>
      <div>
        <el-tabs v-model="activeName" type="card">
            <el-tab-pane label="工单信息" name="first">
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>工单信息</span>
                    </div>
                    <div>
                      <el-descriptions>
                          <el-descriptions-item label="所在地">
                            <div class="box">{{formModel2.location}}</div>
                          </el-descriptions-item>
                          <el-descriptions-item label="施工位置">
                            {{formModel2.constructionLocationName}}
                          </el-descriptions-item>
                          <el-descriptions-item label="施工环境">{{formModel2.environmentName}}</el-descriptions-item>
                          <el-descriptions-item label="水箱材质">{{formModel2.materialN}}</el-descriptions-item>
                          <el-descriptions-item label="水箱体积">{{formModel2.size}}{{formModel2.sizeUnitN}}</el-descriptions-item>
                          <el-descriptions-item label="施工难度">{{formModel2.difficultyName}}</el-descriptions-item>
                          <el-descriptions-item label="逾期入场补偿金">{{formModel2.amount}}</el-descriptions-item>
                          <el-descriptions-item label="工程总预算">{{formModel2.budget}}</el-descriptions-item>
                          <el-descriptions-item label="工期要求">{{formModel2.period}}</el-descriptions-item>
                          <el-descriptions-item label="通过后打款比例">{{formModel2.completionPayProp}}</el-descriptions-item>
                          <el-descriptions-item label="驻地条件要求">
                            <div class="box">
                              {{formModel2.requirement}}
                            </div>
                          </el-descriptions-item>
                          <el-descriptions-item label="施工阶段要求">
                            <div class="box">
                              {{formModel2.stageRequirements}}
                            </div>
                          </el-descriptions-item>

                          <el-descriptions-item label="验收标准">
                            <div class="box">
                              {{formModel2.acceptanceCriteria}}
                            </div>
                          </el-descriptions-item>
                          <el-descriptions-item label="售后要求">
                            <div class="box">
                              {{formModel2.salesRequirement}}
                            </div>
                          </el-descriptions-item>
                      </el-descriptions>
                    </div>
                </el-card>
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>接单要求</span>
                    </div>
                    <div>
                      <el-descriptions>
                          <el-descriptions-item label="保证金">{{formModel3.amount}}</el-descriptions-item>
                          <el-descriptions-item label="师傅完成工单量">{{formModel3.completedNum}}</el-descriptions-item>
                          <el-descriptions-item label="订单发布模式">{{formModel3.orderModelN}}</el-descriptions-item>
                          <el-descriptions-item label="是否要求师傅具有施工资质">
                            <template>
                              <span v-if="formModel3.isQualification">是</span>
                              <span v-else>否</span>
                            </template>
                          </el-descriptions-item>
                          <el-descriptions-item label="是否要求师傅上传购买保险凭证">
                            <template>
                              <span v-if="formModel3.isInsuranceCertificate">是</span>
                              <span v-else>否</span>
                            </template>
                          </el-descriptions-item>
                      </el-descriptions>
                    </div>
                </el-card>
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                        <span>客户信息</span>
                    </div>
                    <div>
                      <el-descriptions>
                          <el-descriptions-item label="客户名称">{{formModel4.customerName}}</el-descriptions-item>
                          <el-descriptions-item label="联系方式">{{formModel4.customerPhone}}</el-descriptions-item>
                      </el-descriptions>
                    </div>
                </el-card>
                <el-card class="box-card">
                    <div slot="header" class="clearfix">
                    <span>订单信息</span>
                    </div>
                    <div>
                      <el-descriptions>
                          <el-descriptions-item label="订单状态">{{formModel.statusN}}</el-descriptions-item>
                          <el-descriptions-item label="订单编号">{{formModel.number}}</el-descriptions-item>
                          <el-descriptions-item label="发布时间">{{formModel.createTime}}</el-descriptions-item>
                      </el-descriptions>
                    </div>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="现场照片" name="second">
                <div>
                    <el-image v-for="(item,index) in imageList" :key="index"
                        class="img"
                        :src="item"
                        fit="fit"></el-image>
                </div>
            </el-tab-pane>
            <el-tab-pane label="师傅信息" name="third">
                <div style="margin:30px">
                    <el-descriptions v-if="technicianInfo!=null">
                        <el-descriptions-item label="姓名">{{technicianInfo.realName}}</el-descriptions-item>
                        <el-descriptions-item label="手机号码">{{technicianInfo.phone}}</el-descriptions-item>
                        <el-descriptions-item label="会员等级">{{technicianInfo.level}}</el-descriptions-item>
                        <el-descriptions-item label="好评率">80%</el-descriptions-item>
                        <el-descriptions-item label="擅长类目">家具灯具厨卫健身器材</el-descriptions-item>
                        <el-descriptions-item label="师傅来源">4.6分</el-descriptions-item>
                        <el-descriptions-item label="所在地区">{{technicianInfo.region}}</el-descriptions-item>
                        <el-descriptions-item label="公司性质">80%</el-descriptions-item>
                        <el-descriptions-item label="公司地址">家具灯具厨卫健身器材</el-descriptions-item>
                        <el-descriptions-item label="联系电话">4.6分</el-descriptions-item>
                        <el-descriptions-item label="服务介绍">50单</el-descriptions-item>
                    </el-descriptions>
                </div>
            </el-tab-pane>
            <el-tab-pane label="施工进度" name="fourth">
                <div style="margin:50px">
                  <el-timeline >
                    <el-timeline-item :timestamp="item.submitDate" placement="top" v-for="(item,index) in constructionProgressList" :key="index">
                        <h4>{{item.submitByN}} {{item.title}}</h4>
                        <div>
                          <el-image v-for="(item1,index1) in item.imageList" :key="index1"
                          class="img"
                          style="width:50px;height:50px"
                          :src="item1"
                          fit="fit"></el-image>
                        </div>
                        <p>{{item.submitByN}} 提交于 {{item.submitTime}}</p>
                    </el-timeline-item>
                  </el-timeline>
                </div>
            </el-tab-pane>
            <el-tab-pane label="客户评价" name="five">
                <el-table
                :data="tableData"
                style="width: 100%">
                <el-table-column
                    prop="companyName"
                    label="评论人"
                    width="180">
                </el-table-column>
                <el-table-column prop="starRating" label="星级" >
                  <template slot-scope="{row}">
                    <el-rate v-model="row.starRating" disabled ></el-rate>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="content"
                    label="评论内容" width="400">
                </el-table-column>
                <el-table-column prop="address" label="评论图片">
                  <template slot-scope="{row}">
                    <span>
                      <el-image
                    class="img"
                    style="width: 50px; height: 50px"
                    :src="row.image"
                    fit="fit"></el-image>
                    </span>
                  </template>
                </el-table-column>
                <el-table-column
                    prop="createTime"
                    label="评论时间">
                </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>
        
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <!-- <el-button type="primary" @click="handleSubmit" :loading="submitting"
          >确 定</el-button
        > -->
      </span>
    </el-dialog>
  </template>
  <script>
  import Constant from "@/constant";
  import { getToken } from "@/utils/auth"; // get token from cookie
  import workOrderApi from "@/api/base/workOrder";
  import dataDictionaryApi from "@/api/sys/dataDictionary";
  
  export default {
    props: ["businessKey", "title"],
    data() {
      return {
          showPwd: true,
          ruleValidate: {

          },
          roleList: [],
          formModel: {},
          formModel2:{},
          formModel3:{},
          formModel4:{},
          formModel5:{},
          tableData:[],
          showDialog: true,
          loading: false,
          submitting: false,
          enterpriseList:[],
          //上传地址
          uploadUrl: Constant.serverUrl + "/uploadPicture",
          uploadData: {
              subFolder: "water-tank",
          },
          fileUrl: "",
          headers: {
              Authorization: getToken(),
          },
          activeName: 'first',
          paystatusList:[],
          orderStatusList:[],
          orderModelList:[],
          technicianInfo:{},
          imageList:[],
          constructionProgressList:[],
          reverse: true,
          locationList:[],
          environmentList:[],
          materialList:[],
          difficultyList:[],
      };
    },
    created() {
      var self = this;

      dataDictionaryApi.findByCatalogName({
        catalogName: "支付状态",
      })
      .then((response) => {
        var jsonData = response.data;
        
        self.paystatusList = jsonData.data;
      });

      dataDictionaryApi.findByCatalogName({
        catalogName: "工单状态",
      })
      .then((response) => {
        var jsonData = response.data;
        
        self.orderStatusList = jsonData.data;

        //alert(JSON.stringify(self.orderStatusList))
      });

      dataDictionaryApi.findByCatalogName({
        catalogName: "订单发布模式",
      })
      .then((response) => {
        var jsonData = response.data;
        
        self.orderModelList = jsonData.data;
      });

      dataDictionaryApi.findByCatalogName({
        catalogName: "施工位置",
      })
      .then((response) => {
        var jsonData = response.data;
        
        self.locationList = jsonData.data;
      });

      dataDictionaryApi.findByCatalogName({
        catalogName: "施工环境",
      })
      .then((response) => {
        var jsonData = response.data;
        
        self.environmentList = jsonData.data;
      });

      dataDictionaryApi.findByCatalogName({
        catalogName: "水箱材质",
      })
      .then((response) => {
        var jsonData = response.data;
        
        self.materialList = jsonData.data;
      });

      dataDictionaryApi.findByCatalogName({
        catalogName: "施工难度",
      })
      .then((response) => {
        var jsonData = response.data;
        
        self.difficultyList = jsonData.data;
      });
    },
    methods: {
      
      closeDialog() {
        this.$emit("close", false);
      },
      handleSubmit() {
        var self = this;
  
        this.$refs["form"].validate((valid) => {
          if (valid) {
            (function () {
              var id = self.formModel.id;
  
              if (id == null || id.length == 0) {
                return workOrderApi.add(self.formModel);
              } else {
                return workOrderApi.update(self.formModel);
              }
            })().then(function (response) {
              var jsonData = response.data;
  
              if (jsonData.result) {
                self.$message({
                  message: "保存成功!",
                  type: "success",
                });
  
                self.$emit("close", true);
              } else {
                self.$message({
                  message: jsonData.message + "",
                  type: "warning",
                });
  
                self.$emit("close", false);
              }
            });
          }
        });
      },
      handleAvatarSuccess(res, file) {
          var self = this;
          self.formModel.image = res.data;
  
          self.fileUrl =
            res.data + "?x-oss-process=image/resize,m_lfit,h_300,w_300";
      },
      beforeAvatarUpload(file) {
          const isLt2M = file.size / 1024 / 1024 < 2;
          if (!isLt2M) {
              this.$message.error('上传头像图片大小不能超过 2MB!');
          }
          return isLt2M;
      }
    },
    async mounted() {
      var self = this;
      self.loading = true;
  
      (function () {
        if (self.businessKey != null && self.businessKey.length > 0) {
          return workOrderApi.edit(self.businessKey);
        } else {
          return workOrderApi.create();
        }
      })()
        .then((response) => {
          self.showModal = true;
          var jsonData = response.data;
  
          if (jsonData.result) {
              self.formModel = jsonData.data.workOrder;
              self.formModel2 = jsonData.data.installationRequirement;
              self.formModel3 = jsonData.data.receiveRequire;
              self.formModel4.customerName = jsonData.data.customerName;
              self.formModel4.customerPhone = jsonData.data.customerPhone;
              self.tableData = jsonData.data.commentInfoList;
              self.technicianInfo = jsonData.data.technicianInfo;
              self.imageList = jsonData.data.imageList;
              self.constructionProgressList = jsonData.data.constructionProgressList;
  
              let image = self.formModel.image;
              if (image != null) {
                  self.fileUrl = image 
              }
  
             
          } else {
            self.$message.error(jsonData.message + "");
          }
  
          self.loading = false;
        })
        .catch((error) => {
          self.$message.error(error + "");
          self.loading = false;
        });
    },
    components: {
    },
  };
  </script>
  <style scoped>
  .user-panel {
    margin: 10px auto;
  }
  .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
    .box-card{
        margin-bottom:10px
    }
    .img{
        width: 100px; 
        height: 100px;
        margin:10px
    }
    .box {
      width: 300px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .box:hover {
      position: absolute;
      z-index: 1000;
      overflow: visible;
      white-space: normal;
      background-color: white;
      border: 1px solid #ccc;
      padding: 5px;
      max-width: none; /* 允许宽度自适应 */
    }

    
  </style>