<template>
  <div class="app-container">
    <div div style="font-size:25px;text-align:left ; position:relative;">
      <el-button v-if="view" type="primary" @click="saveData('false')">
        {{ '保存' }}
      </el-button>
      <el-button v-if="view" type="primary" @click="saveData('true')">
        {{ '提交' }}
      </el-button>
        <el-upload
        class="upload-demo"
        action="/api/upload"
        :on-success="onSuccess"
        multiple
        :file-list="fileList">
        <el-button size="small" type="primary">点击上传</el-button>
      </el-upload>
    </div>
    <el-divider></el-divider>
    <el-form ref="ContractSalaryForm" :rules="rules" :model="ruleFrom" :label-position="labelPosition"
             label-width="auto" style="width: 100%" :disabled="!view">
      <!-- 基础信息 -->
      <div class="form-dataForm">
        <el-row>基本信息</el-row>
      </div>
      <el-row>
        <el-col :span="8">
          <el-form-item label='报价单号' prop="FBILLNO">
            <el-input v-model="ruleFrom.FBILLNO" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label='询价名称' prop="FProjectName">
            <el-input v-model="ruleFrom.FProjectName" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="询价单号" prop="FSrcBillNo">
            <el-input v-model="ruleFrom.FSrcBillNo" readonly/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="供应商编码" prop="FSupplierId">
            <el-input maxlength="64" v-model="ruleFrom.FSupplierId" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="供应商名称" prop="FSupplierName">
            <el-input maxlength="64" v-model="ruleFrom.FSupplierName" readonly></el-input>

          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="开标日期" prop="FOpenDate">
            <el-date-picker
                style="width: 100%"
                v-model="ruleFrom.FOpenDate"
                type="date"
                format="yyyy年MM月dd日 HH时mm分ss秒"
                value-format="yyyy-MM-dd HH:mm:ss"
                readonly>
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="8">
          <el-form-item label='报价状态' prop="FPriceStatus">
            <el-input v-model="ruleFrom.FPriceStatus" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label='报价日期' prop="FQuoteDate">
            <el-date-picker
                style="width: 100%"
                v-model="ruleFrom.FQuoteDate"
                type="date"
                format="yyyy年MM月dd日 HH时mm分ss秒"
                value-format="yyyy-MM-dd HH:mm:ss"
                readonly>
            </el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="报价截至日期" prop="FExpiryDate">
            <el-date-picker
                style="width: 100%"
                v-model="ruleFrom.FExpiryDate"
                type="date"
                format="yyyy年MM月dd日 HH时mm分ss秒"
                value-format="yyyy-MM-dd HH:mm:ss"
                readonly>
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label='联系人' prop="FContact">
            <el-input v-model="ruleFrom.FContact" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label='电话' prop="FPhone">
            <el-input v-model="ruleFrom.FPhone" placeholder='请输入电话' readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="邮箱" prop="FMail">
            <el-input v-model="ruleFrom.FMail" maxlength="64" placeholder="请输入邮箱" readonly/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label='币别' prop="FCurrId">
            <el-input v-model="ruleFrom.FCurrId" readonly></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="含税" prop="FIsIncludedTax" style="text-align: left">
            <el-switch v-model="ruleFrom.FIsIncludedTax" :active-value="'true'" :inactive-value="'false'"
                       active-color="#13ce66"
                       inactive-color="#ff4949" :disabled="true">
              <!--              @change="priceInputView()"-->
            </el-switch>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 其他信息 -->
      <el-collapse v-model="activeNames">
        <el-collapse-item title="其他信息" class="form-title" name="1">
          <div class="form-content" v-if="activeNames=='1'">
            <el-divider content-position="left"></el-divider>
            <el-row>
              <el-col :span="8">
                <el-form-item label='采购组织' prop="FPurOrgId">
                  <el-input v-model="ruleFrom.FPurOrgId" readonly/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label='询价日期' prop="FDate">
                  <el-date-picker type="date" format="yyyy年MM月dd日 HH时mm分ss秒"
                                  value-format="yyyy-MM-dd HH:mm:ss" v-model="ruleFrom.FDate"
                                  style="width: 100%;" readonly/>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label='询价员' prop="FBuyer">
                  <el-input v-model="ruleFrom.FBuyer" readonly/>
                </el-form-item>
              </el-col>
            </el-row>
          </div>
        </el-collapse-item>
      </el-collapse>

    </el-form>
    <el-tabs type="border-card" style="margin-top: 50px">
      <el-tab-pane label="明细信息">
        <div>
          <el-table
              :key="tableKey"
              :data="list"
              border
              fit
              highlight-current-row
              show-summary
              max-height="500px"
              style="width: 100%"
          >
            <el-table-column prop="FSEQ" label="序号" align="center" width="50" fixed="left"></el-table-column>
            <el-table-column
                prop="FMaterialId"
                label="物料代码"
                min-width="150"
                fixed="left"
                align="center">
            </el-table-column>
            <el-table-column
                prop="FMaterialName"
                label="物料名称"
                min-width="150"
                align="center">
            </el-table-column>
            <el-table-column
                prop="FMaterialModel"
                label="规格型号"
                min-width="150"
                align="center">
            </el-table-column>
            <el-table-column
                prop="FUnitID"
                label="单位"
                min-width="150"
                align="center">
            </el-table-column>
            <el-table-column
                prop="FQty"
                label="询价数量"
                min-width="100"
                align="center">
            </el-table-column>
            <el-table-column
                prop="FPrice"
                label="单价"
                min-width="100"
                align="center">
              <template slot-scope="scop">
                <el-input type="number" v-model="scop.row.FPrice" v-show="priceInput"
                          @input="updatePrice(scop.row)"></el-input>
                <span v-show="!priceInput">{{ scop.row.FPrice }}</span>
              </template>
            </el-table-column>
            <el-table-column
                prop="FTaxRate"
                label="税率%"
                min-width="100"
                align="center">
              <template slot-scope="scop">
                <el-input type="number" v-model="scop.row.FTaxRate" v-show="priceInput"
                          @input="updatePrice(scop.row)"></el-input>
                <span v-show="!priceInput">{{ scop.row.FTaxRate }}</span>
              </template>
            </el-table-column>
            <el-table-column
                prop="FTaxPrice"
                label="含税单价"
                min-width="110"
                align="center">
            </el-table-column>
            <el-table-column
                prop="FNote"
                label="备注"
                align="center"
                width="240">
            </el-table-column>
            <el-table-column
                prop="FPayConditionId"
                label="付款方式"
                align="center"
                width="240">
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>


import {queryData, queryDataItem, saveData} from "@/api/login";

export default {
  name: "master",
  components: {},
  data() {
    return {
      labelPosition: 'right',
      list: [],
      fileList: [],
      data: {
        FormId: "kafe2f22a0498441f9109c31cf5586da5",
        FieldKeys: '',
        FilterString: "FBILLNO like'%BJ23060004'",
        OrderString: "",
        TopRowCount: "0",
        StartRow: "0",
        Limit: 100
      },
      tableKey: 0,
      FBILLNO: undefined,
      username: undefined,
      password: undefined,
      // 折叠信息激活状态
      activeNames: '1',
      //组件的刷新
      timer: '',
      priceInput: false,
      view: true,
      //多选
      multipleSelection: [],
      listQuery: {
        currentPage: 1,
        pageSize: 10,
        id: undefined,
        type: undefined,
      },
      ruleFrom: {},
      saveFrom: {
        Creator: "String",
        NeedUpDateFields: [],
        IsAutoSubmitAndAudit: true,
        Model: {
          FID: '',
          //供应商确认
          FIsConfirm: true,
          //供应商确认时间
          FConfirmDate: '',
          //供应商提交时间
          FQuoteDate: '',
          //供应商信息明细表：FEntryID 分录ID，FQty 询价数量，FPrice 单价，FTaxRate 税率，FTaxPrice 含税单价
          FEntity: []
        }
      },
      rules: {
        FSupplierId: [{required: true, message: '请输入供应商编码', trigger: ['blur', 'change']}],
        FExpiryDate: [{required: true, message: '请选择报价截至日期', trigger: ['blur', 'change']}],
        FOpenDate: [{required: true, message: '请选择开标日期', trigger: ['blur', 'change']}],
      },
    }
  },
  created() {
    if (this.$route.query.FBILLNO!==undefined && this.$route.query.username!==undefined && this.$route.query.password!==undefined){
      this.FBILLNO = this.$route.query.FBILLNO
      this.username = this.$route.query.username
      this.password = this.$route.query.password
      this.ruleFromData();
      this.listData();
    }else {
      this.handleWarning("请重新登录");
      if (this.$route.query.FBILLNO!==undefined){
        this.$router.push({
          path: "/?FBILLNO="+this.$route.query.FBILLNO,
        });
      }else {
        this.handleWarning("请重新打开链接");
        this.$router.push({
          path: "/",
        });
      }

    }

  },
  computed: {},
  watch: {},
  methods: {
    // 文件上传对返回的Json数据进行解析
    onSuccess(response,file,fileList){
      if(response.status == 0){
        this.$message({
          message:response.message,
          type: 'error'
        })
      }else{
        this.$message({
          message:response.message,
          type: 'success'
        })
      }
    },

    updatePrice(row) {
      row.FTaxPrice = (Number(row.FPrice == "" ? 0 : row.FPrice) * (1 + (Number(row.FTaxRate == "" ? 0 : row.FTaxRate) / 100))).toFixed(2);
      console.log(row)
    },
    // priceInputView() {
    //   if (this.ruleFrom.FIsIncludedTax == 1) {
    //     this.priceInput = true;
    //   } else {
    //     this.priceInput = false;
    //   }
    // },
    saveData(IsAutoAdjustField) {
      let query = {
        FID: this.ruleFrom.FID,
        IsAutoAdjustField: IsAutoAdjustField,
        FEntity: []
      }
      if (IsAutoAdjustField === 'true') {
        query.FQuoteDate = this.ruleFrom.FQuoteDate
      }
      if (this.list !== undefined && this.list.length > 0) {
        for (let i = 0; i < this.list.length; i++) {
          let item = {
            FEntryID: this.list[i].FEntryID,
            FQty: this.list[i].FQty,
            FPrice: this.list[i].FPrice,
            FTaxRate: this.list[i].FTaxRate,
            FTaxPrice: this.list[i].FTaxPrice,
            // FMaterialId: this.list[i].FMaterialId,
          }
          query.FEntity.push(item);
        }
      }
      saveData(query).then(res => {
        console.log(res.data.Result.ResponseStatus.IsSuccess)
        if (res.data.Result.ResponseStatus.IsSuccess === true){
          switch (IsAutoAdjustField){
            case 'true':
                  this.handleSuccess('提交成功');
                  break;
            case 'false':
                  this.handleSuccess('保存成功');
                  break;
          }
          this.listData()
          this.ruleFromData();
        }else {
          switch (IsAutoAdjustField){
            case 'true':
              this.handleWarning('提交失败');
              break;
            case 'false':
              this.handleWarning('保存失败');
              break;
          }
        }

      })
    },
    ruleFromData() {
      // this.data.FieldKeys = this.FieldKeysMaster
      let query = {
        FBILLNO: this.FBILLNO,
        username: this.username,
        password: this.password
      }
      queryData(query).then(res => {
        if (res.data==null){
          this.handleWarning('获取数据失败，5秒后跳转至重新登录');
          setTimeout(() => {
            this.$router.push({
              path: "/?FBILLNO="+this.$route.query.FBILLNO,
            });
          }, 5000);
        }else {
          this.ruleFrom = res.data[0]
          this.view = res.data[0].Status
          this.priceInput = res.data[0].Status
        }
      })
    },
    listData() {
      let query = {
        FBILLNO: this.FBILLNO,
        username: this.username,
        password: this.password
      }
      queryDataItem(query).then(res => {
        this.list = res.data
      })
    },

    handleWarning(response) {
      this.$message({
        message: response.message || response,
        type: 'warning',
        duration: 2000
      })
    },

    handleSuccess(response) {
      this.$message({
        message: response.message || response,
        type: 'success',
        duration: 2000
      })
    }
  },
}
</script>
<style scoped>
/* 设置表单的居中 */
.dataForm-style {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 设置基础信息标题的样式 */
.form-dataForm {
  width: 100%;
  height: 47px;
  text-align: left;
  line-height: 47px;
  font-size: 17px;
  font-weight: 600;
  margin: 15px 0;
  border-bottom: 1px solid #e6ebf5;
  /* border-bottom: 1px solid #0efc61; */
}

/* 去掉折叠上边框线 */
::v-deep .el-collapse {
  border-top: 0;
}

/* 修改折叠标题样式 */
::v-deep .form-title .el-collapse-item__header {
  font-size: 17px;
  font-weight: 600;
}

/* 修改折叠标题样式 */
::v-deep .form-title .el-collapse-item__content {
  border-bottom: 0;
}

/* 修改折叠标题箭头样式 */
::v-deep .form-title .el-collapse-item__header .el-collapse-item__arrow {
  margin: 0 0 0 5px;
}

::v-deep .el-divider--horizontal {
  margin: 10px 0;
}

/* 去掉数字输入框上下加减按钮 */
::v-deep input::-webkit-outer-spin-button,
::v-deep input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
</style>
