<template>
    <div class="app-container">
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button
                    type="primary" size="mini"
                    icon="el-icon-back" @click="backList"
                    >取消</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="warning" plain
                    icon="el-icon-download" size="mini"
                    >存草稿</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button
                    type="success"
                    icon="el-icon-check" 
                    size="mini" 
                    >上架</el-button>
            </el-col>
        </el-row>

        <el-form :model="formData" ref="formData" size="small" :inline="true" label-width="130px" style="margin-left: 40px;">
            <el-row :gutter="24" class="mb8">
                <el-form-item label="装备名称：" prop="equipmentName">
                    <el-input
                        v-model="formData.equipmentName"
                        placeholder="请输入装备名称"
                        clearable maxlength="20"
                        style="width: 1100px;"
                    />   
                </el-form-item> 
            </el-row>  
            <el-row :gutter="24" class="mb8">
                <el-form-item label="装备类目：" prop="typeId1">
                    <el-select v-model="formData.typeId1"
                        placeholder="一级分类" clearable>
                        <el-option v-for="dict in equipmentTypeList"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"/>
                    </el-select>
                </el-form-item> 
                <el-form-item label="" prop="typeId2">
                    <el-select v-model="formData.typeId2"
                        placeholder="二级分类" clearable>
                        <el-option v-for="dict in equipmentTypeList"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"/>
                    </el-select>
                </el-form-item> 
                <el-form-item label="" prop="typeId3">
                    <el-select v-model="formData.typeId3"
                        placeholder="三级分类" clearable>
                        <el-option v-for="dict in equipmentTypeList"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"/>
                    </el-select>
                </el-form-item> 
                <el-form-item label="" prop="typeId4">
                    <el-select v-model="formData.typeId4"
                        placeholder="四级分类" clearable>
                        <el-option v-for="dict in equipmentTypeList"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"/>
                    </el-select>
                </el-form-item> 
            </el-row>
            <el-row :gutter="24" class="mb8">
                <el-form-item label="装备所在地：" prop="local1">
                    <el-select v-model="formData.local1"
                        placeholder="所在省份" clearable>
                        <el-option v-for="dict in equipmentTypeList"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"/>
                    </el-select>
                </el-form-item> 
                <el-form-item label="" prop="local2">
                    <el-select v-model="formData.local2"
                        placeholder="所在市" clearable>
                        <el-option v-for="dict in equipmentTypeList"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"/>
                    </el-select>
                </el-form-item> 
                <el-form-item label="" prop="local3">
                    <el-select v-model="formData.local3"
                        placeholder="所在县" clearable>
                        <el-option v-for="dict in equipmentTypeList"
                        :key="dict.value"
                        :label="dict.label"
                        :value="dict.value"/>
                    </el-select>
                </el-form-item>  
            </el-row>  
            <el-row :gutter="24" class="mb8">
                <el-col :span="10">
                    <el-form-item label="装备编号：" prop="equipmentCode">
                        <el-input
                            v-model="formData.equipmentCode"
                            placeholder="请输入装备编号"
                            clearable maxlength="20" 
                            style="width: 400px;"
                        />   
                    </el-form-item> 
                </el-col>
                <el-col :span="10">
                    <el-form-item label="装备品牌：" prop="equipmentBrand">
                        <el-input
                            v-model="formData.equipmentBrand"
                            placeholder="请输入装备品牌"
                            clearable maxlength="20" 
                            style="width: 400px;"
                        />   
                    </el-form-item> 
                </el-col>
            </el-row>  
            <el-row :gutter="24" class="mb8">
                <el-col :span="10">
                    <el-form-item label="出厂日期：" prop="productionTime">
                        <el-date-picker
                            v-model="formData.productionTime"
                            placeholder="请选择出厂日期"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            type="datetime"  style="width: 400px;">
                        </el-date-picker>
                    </el-form-item> 
                </el-col>
                <el-col :span="10">
                    <el-form-item label="租赁价格(天/元)：" prop="leasePrice">
                        <el-input
                            v-model="formData.leasePrice"
                            placeholder="请输入租赁价格"
                            clearable maxlength="20" 
                            style="width: 400px;"
                        />   
                    </el-form-item> 
                </el-col>
            </el-row>  
            <el-row :gutter="24" class="mb8">
                <el-col :span="10">
                    <el-form-item label="联系人：" prop="userName">
                        <el-input
                            v-model="formData.userName"
                            placeholder="请输入联系人"
                            clearable maxlength="20" 
                            style="width: 400px;"
                        />   
                    </el-form-item> 
                </el-col>
                <el-col :span="10">
                    <el-form-item label="联系电话：" prop="phone">
                        <el-input
                            v-model="formData.phone"
                            placeholder="请输入联系电话"
                            clearable maxlength="20" 
                            style="width: 400px;"
                        />   
                    </el-form-item> 
                </el-col>
            </el-row>  
            <el-row :gutter="24" class="mb8">
                <el-col :span="10">
                    <el-form-item label="整机重量(KG)：" prop="weight">
                        <el-input
                            v-model="formData.weight"
                            placeholder="请输入整机重量"
                            clearable maxlength="20" 
                            style="width: 400px;"
                        />   
                    </el-form-item> 
                </el-col>
            </el-row>  

            <el-row :gutter="24" class="mb8"> 
                <span style="color: #606266;font-size: 14px;font-weight: 600;margin-left: 20px;">添加描述:</span>
                <span style="color: rgb(255, 59, 48);font-size: 12px;margin-left: 10px;">注:添加不少于2个关于装备性能、外观等相关的描述，如档位、标定功率、规格等</span>
            </el-row>  

            <el-row :gutter="24" class="mb8">
                <el-col :span="10">
                    <div v-for="(item,index) in describeList" :key="index">
                        <el-input
                            v-model="item.label"
                            placeholder="描述名称"
                            clearable maxlength="20" 
                            style="width: 120px;"
                        />   
                        <span>:</span>
                        <el-input
                            v-model="item.describe"
                            placeholder="描述详情"
                            clearable maxlength="20" 
                            style="width: 400px;"
                        />  

                    </div>
                </el-col> 
            </el-row>  

            
        </el-form>
   
        <!-- 图片查看弹窗 -->
        <el-dialog :visible.sync="dialogVisible" width="500px" height="500px">
            <img width="100%" height="500px" :src="dialogImageUrl" />
        </el-dialog>
   
    </div>
  </template> 
    
    <script>  
  import { getToken } from "@/utils/auth";
  export default {
    name: "",
    // dicts: ["purchase_task_status"],
    data() {
      return {  
        Id:"",
        isView: false, 
        equipmentTypeList: [], //下拉
        materialModelList: [], //规格型号下拉
        supplierList: [], //厂家下拉
        fixCodeList: ["否", "是"], 
        formData: { 
          typeId: undefined,
          supplierId: undefined,
          productionTime: undefined,
        },    
        describeList:[
            {label:"",describe:""},{label:"",describe:""}
        ],//描述
        //图片查看弹窗
        dialogImageUrl: "",
        dialogVisible: false,
        //上传
        upload: {
          // 设置上传的请求头部
          headers: { Authorization: "Bearer " + getToken() },
          // 上传的地址
          url: process.env.VUE_APP_BASE_API + "/file/upload",
        },
      };
    },
    mounted() { 
    //   const Id = this.$route.query && this.$route.query.Id;
    //   const isView = this.$route.query && this.$route.query.isView; 
    //   this.Id = Id;
    //   if (isView == "true") {
    //     this.isView = true;
    //   } else {
    //     this.isView = false;
    //   } 
    //   this.resetForm("formData");
    //   console.log(this.isView);
      // this.getSupplierList() 
    },
    methods: {
      // 返回列表页
      backList() {
        const obj = { path: "/lessor/equipment" };
        this.$tab.closeOpenPage(obj);
      },
    //   getDeviceType() {
    //     getDeviceType({ level: 4, skipPermission: 1 }).then((response) => {
    //       let matModelRes = response.data;
    //       this.materialModelList = matModelRes.map((item) => {
    //         return {
    //           label: item.typeName,
    //           value: item.typeId,
    //         };
    //       });
    //     });
    //   },
    //   getSupplierList() {
    //     getManufacturerSelect().then((response) => {
    //       let arrRes = response.rows;
    //       this.supplierList = arrRes.map((item) => {
    //         return {
    //           label: item.supplier,
    //           value: item.supplierId,
    //         };
    //       });
    //     });
    //   }, 
       
      //上传
      beforeFileUpload(row) {
        this.rowData.fileType = row.fileType; 
      },
      // 文件上传成功处理
      handleFileSuccess(response, file, fileList) {
        if (response.code == 200) {
          let param = {
            taskId: this.taskId,
            taskType: "0",
            name: response.data.name,
            url: response.data.url,
            modelId: this.rowData.typeId,
            fileType: this.rowData.fileType,
          };
          console.log(param);
          uploadPurchaseFile(param)
            .then((response) => {
              this.$modal.msgSuccess("上传成功");
              this.getFileData();
            })
            .catch(() => {
              this.$modal.msgError("上传失败");
            });
        }
      },
      //查看
      picturePreview(file) {
        this.dialogImageUrl = file.url;
        const parts = file.name.split(".");
        const extension = parts.pop();
        if (extension === "doc" || extension === "docx" || extension === "pdf") {
          const windowName = file.name;
          window.open(file.url, windowName);
        } else {
          this.dialogVisible = true;
        }
      },
 
    },
  };
  </script>
    <style lang="scss" scoped>
  .uploadImg {
    padding-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .deviceCode {
    margin-top: 10px;
    padding-bottom: 20px;
    font-size: 18px;
  }
  ::v-deep.el-table .fixed-width .el-button--mini {
    width: 60px !important;
    margin-bottom: 10px;
  }
  //隐藏图片上传框的css
  ::v-deep.disabled {
    .el-upload--picture-card {
      display: none;
    }
  }
  </style>