<template>
  <div class="container">
    <el-form ref="elForm" :model="formData" :rules="rules" size="mini" label-width="100px">
      <el-form-item v-if="false" label="报价单Id" prop="quotId">
        <el-input v-model="formData.quotId" placeholder="报价单Id" readonly clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="报价单单号" prop="quotCode">
        <el-input v-model="formData.quotCode" placeholder="报价单单号(自动生成)" readonly clearable
                  ></el-input>
      </el-form-item>
      <el-form-item label="客户" prop="quotCustomerName">
        <el-input readonly v-model="formData.quotCustomerName" placeholder="请输入客户" >
          <template slot="append">
            <span @click="openCustomer">选择</span>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item label="地址" prop="quotAddress">
        <el-input v-model="formData.quotAddress" placeholder="请输入地址" clearable>
        </el-input>
      </el-form-item>
      <el-form-item label="审核人" prop="quotCheckUserNickname">
        <el-input readonly v-model="formData.quotCheckUserNickname" placeholder="审核人" clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="提交状态" prop="quotApprovalStatus">
        <el-input readonly v-model="formData.quotApprovalStatus" placeholder="保存后显示" clearable
        ></el-input>
      </el-form-item>
      <el-form-item label="项目名称" prop="quotProject">
        <el-input v-model="formData.quotProject" placeholder="请输入项目名称" clearable >
        </el-input>
      </el-form-item>
      <el-form-item label="报价要求" prop="quotQuotationRequire">
        <el-input v-model="formData.quotQuotationRequire" placeholder="请输入报价要求" clearable
                  ></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="quotPhone">
        <el-input v-model="formData.quotPhone" placeholder="请输入联系电话" clearable >
        </el-input>
      </el-form-item>


      <el-divider content-position="left" class="customer_divider_text">询价附件(先保存)</el-divider>
      <div v-hasPermi="['quot:quot:quotXjFile']">
        <el-upload class="upload-demo"
                   ref="upload"
                   name="quotFile"
                   :action="uploadUrl"
                   :headers="headers"
                   :data="{ relation_id: this.formData.quotId,file_type: 'quotXjFile' }"
                   :on-success="handleAvatarSuccess"
                   :show-file-list="false"
                   :limit="1"
                   v-if="this.form.quotApprovalStatus == '0'">
          <el-button size="small" type="primary" @click="uploadFile('quotXjFile')">上传文件</el-button>
        </el-upload>
      </div>
      <el-table class="down" :data="quotXjFileList" border stripe style="width: 100%;margin-top: 10px;" height="200px">
        <el-table-column prop="fileName" label="文件名称" ></el-table-column>
        <el-table-column width="150px" label="操作">
          <template slot-scope="scope">
            <el-button :key="Math.random()" size="small" type="text">
              <a @click="downloadFile(scope.row.fileUrl)">下载</a>
            </el-button>
            <el-button :key="Math.random()" size="small" type="text" v-if="form.quotApprovalStatus == '0'">
              <a @click="deleteFile(scope.row.fileId,'quotXjFile')">删除</a>
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-divider content-position="left" class="customer_divider_text">技术规范要求(询价附件)</el-divider>
      <div v-hasPermi="['quot:quot:quotXjFile']">
        <el-upload class="upload-demo"
                   ref="upload"
                   name="quotFile"
                   :action="uploadUrl"
                   :headers="headers"
                   :data="{ relation_id: this.formData.quotId,file_type: 'quotXjFile' }"
                   :on-success="handleAvatarSuccess"
                   :show-file-list="false"
                   :limit="1"
                   v-if="this.form.quotApprovalStatus == '0'">
          <el-button size="small" type="primary" @click="uploadFile('quotXjFile')">上传文件</el-button>
        </el-upload>
      </div>
      <el-table class="down" :data="quotXjFileList" border stripe style="width: 100%;margin-top: 10px;" height="200px">
        <el-table-column prop="fileName" label="文件名称" ></el-table-column>
        <el-table-column width="150px" label="操作">
          <template slot-scope="scope">
            <el-button :key="Math.random()" size="small" type="text">
              <a @click="downloadFile(scope.row.fileUrl)">下载</a>
            </el-button>
            <el-button :key="Math.random()" size="small" type="text" v-if="form.quotApprovalStatus == '0'">
              <a @click="deleteFile(scope.row.fileId,'quotXjFile')">删除</a>
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <el-divider content-position="left" class="customer_divider_text">反馈附件</el-divider>
      <div v-hasPermi="['quot:quot:quotXjFile']">
        <el-upload class="upload-demo"
                   ref="upload"
                   name="quotFile"
                   :action="uploadUrl"
                   :headers="headers"
                   :data="{ relation_id: this.formData.quotId,file_type: 'quotXjFile' }"
                   :on-success="handleAvatarSuccess"
                   :show-file-list="false"
                   :limit="1"
                   v-if="this.form.quotApprovalStatus == '0'">
          <el-button size="small" type="primary" @click="uploadFile('quotXjFile')">上传文件</el-button>
        </el-upload>
      </div>
      <el-table class="down" :data="quotXjFileList" border stripe style="width: 100%;margin-top: 10px;" height="200px">
        <el-table-column prop="fileName" label="文件名称" ></el-table-column>
        <el-table-column width="150px" label="操作">
          <template slot-scope="scope">
            <el-button :key="Math.random()" size="small" type="text">
              <a @click="downloadFile(scope.row.fileUrl)">下载</a>
            </el-button>
            <el-button :key="Math.random()" size="small" type="text" v-if="form.quotApprovalStatus == '0'">
              <a @click="deleteFile(scope.row.fileId,'quotXjFile')">删除</a>
            </el-button>
          </template>
        </el-table-column>
      </el-table>


      <el-form-item style="margin-top: 15px">
        <el-button  @click="saveForm">保存</el-button>
        <el-button style="margin: 0px 15px 0px 20px" type="primary" @click="submitForm">提交</el-button>
        <el-button  @click="resetForm">重置</el-button>
      </el-form-item>
    </el-form>
    <CustomerSelect :width="100 + '%'" ref="customerSelect" :open="customerOpen" @submit="submitCustomer" @cancel="customerOpen=false"></CustomerSelect>
  </div>
</template>
<script>
import CustomerSelect from "@/views/components/Tools/Mobile/CustomerSelect/index.vue";
import { NumberAdd }  from '@/utils/number';// 数值计算
import { changQuotPrintStatus,listQuot, getQuot, getReturnUpdateQuot, delQuot, addQuot, updateQuot, quotFileList, quotFileDelete, commitQuot, commitJsQuot, commitHjQuot, commitJswQuot, commitOAQuot, feedbackQuot, madeQuot, rejectQuot } from "@/api/quot/quot";
import { getToken } from "@/utils/auth";
import { checkPermi,checkRole } from '@/utils/permission';// 权限判断函数
export default {
  components: {
    // 注册组件
    'CustomerSelect': CustomerSelect,
  },
  props: [],
  data() {
    return {
      // 表单参数
      form: {},
      // 报价单-询价附件列表数据
      quotXjFileList: [],
      // 报价单-反馈附件列表数据
      quotFkFileList: [],
      // 报价单-技术规范附件列表数据
      quotJsgfFileList: [],
      //报价单-询价附件上传地址
      uploadUrl: process.env.VUE_APP_BASE_API + "/quot/quot/quotFile",
      //报价单-询价附件请求头
      headers: {Authorization: "Bearer " + getToken()},
      //是否打开客户选择组件，默认不打开
      customerOpen:false,
      formData: {
        quotId: null,
        quotCode: '',
        quotCustomerName: '',
        quotAddress: '',
        quotCheckUserNickname: '',
        quotProject: '',
        quotQuotationRequire: '',
        quotPhone: '',
        quotQuotationFrom: '',
        quotPrintUserName: '',
        field115: null,
        field116: null,
      },
      rules: {
        quotAddress: [{
          required: true,
          message: '请输入地址',
          trigger: 'blur'
        }],
        quotProject: [{
          required: true,
          message: '请输入项目名称',
          trigger: 'blur'
        }],
        quotQuotationRequire: [{
          required: true,
          message: '请输入报价要求',
          trigger: 'blur'
        }],
        quotPhone: [{
          required: true,
          message: '请输入联系电话',
          trigger: 'blur'
        }],
        quotQuotationFrom: [{
          required: true,
          message: '请输入报价来源',
          trigger: 'blur'
        }],
      },
      field115Action: 'https://jsonplaceholder.typicode.com/posts/',
      field115fileList: [],
      field116Action: 'https://jsonplaceholder.typicode.com/posts/',
      field116fileList: [],
    }
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    //下载附件
    downloadFile(fileUrl){
      window.open(fileUrl, "_blank");
    },

    //删除附件
    deleteFile(fileId,activeName){
      //let activeName = this.activeName;
      quotFileDelete(fileId).then(response => {
        if(activeName=='quotXjFile'){
          this.getQuotXjFileList();
        }else if(activeName=='quotJsInfo'){
          this.getQuotJsgfFileList();
        }else if(activeName=='quotFkFile'){
          this.getQuotFkFileList();
        }
      });
    },
    //点击上传附件按钮触发事件
    uploadFile(activeName){
      this.activeName = activeName
    },
    //成功回调
    handleAvatarSuccess(res) {
      let activeName = this.activeName;
      // 如果上传成功
      if (res.code == 200) {
        this.$modal.msgSuccess(res.msg);
        if(activeName=='quotXjFile'){
          this.getQuotXjFileList();
        }else if(activeName=='quotJsInfo'){
          this.getQuotJsgfFileList();
        }else if(activeName=='quotFkFile'){
          this.getQuotFkFileList();
        }
      } else {
        this.$modal.msgError(res.msg);
      }
      this.$refs.upload.clearFiles(); //上传成功之后清除历史记录**加粗样式**
    },
    submitForm() {
      this.$refs['elForm'].validate(valid => {
        if (!valid) return
        // TODO 提交表单
      })
    },
    resetForm() {
      this.$refs['elForm'].resetFields()
    },
    field115BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 2
      if (!isRightSize) {
        this.$message.error('文件大小超过 2MB')
      }
      return isRightSize
    },
    field116BeforeUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 100
      if (!isRightSize) {
        this.$message.error('文件大小超过 100MB')
      }
      return isRightSize
    },
    //打开客户选择弹窗
    openCustomer(){
      this.customerOpen=true;
    },
    //客户选择确定按钮事件
    submitCustomer(customer){
      this.formData.quotCustomerName = customer.label
      this.customerOpen=false;
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      const quotId = row.quotId || this.ids
      getQuot(quotId).then(response => {
        this.setInfo(response);
      });
    },
    /** 修改按钮操作-详细信息设置 */
    setInfo(response){
      console.log(response)
      this.formData = response.data;
      // this.$set(this.form, "quotJsxzGroup", (this.form.quotJsxzGroupValues==''||this.form.quotJsxzGroupValues==null)?[]:this.form.quotJsxzGroupValues.split(','));
      // this.quotMaterialList = response.data.quotMaterialList;
      // this.open = true;
      // this.activeName = "quotInfo";
      //
      // const quotJsxzGroup = this.form.quotJsxzGroupValues;
      // if(quotJsxzGroup){
      //   if(quotJsxzGroup.indexOf("TL")!==-1){
      //     this.showTl = true;
      //     this.getQuotJsqrFileList('quotJsqrTlFkFile');
      //   }
      //   if(quotJsxzGroup.indexOf("DY")!==-1){
      //     this.showDy = true;
      //     this.getQuotJsqrFileList('quotJsqrDyFkFile');
      //   }
      //   if(quotJsxzGroup.indexOf("ZY")!==-1){
      //     this.showZy = true;
      //     this.getQuotJsqrFileList('quotJsqrZyFkFile');
      //   }
      //   if(quotJsxzGroup.indexOf("QT")!==-1){
      //     this.showQt = true;
      //     this.getQuotJsqrFileList('quotJsqrQtFkFile');
      //   }
      // }
      // this.getQuotXjFileList();
      // this.getQuotJsgfFileList();
      // this.getQuotHjFileList();
      // this.getQuotFkFileList();
    },

    /** 保存按钮 */
    saveForm() {
      this.$refs["elForm"].validate(valid => {
        if (valid) {
          if (this.formData.quotId != null) {
            updateQuot(this.formData).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
            });
          } else {
            addQuot(this.formData).then(response => {
              this.$modal.msgSuccess("新增成功");
              const row = {'quotId':response.data.quotId}
              this.handleUpdate(row);
            }) ;
          }
        }
      });
    },
  },

}

</script>
<style>
.small-upload .el-upload {

  width: 100px;
  height: 100px;
}

.el-upload__tip {
  line-height: 1.2;
}

.container {
  margin: 20px;
}

</style>
