<template>
  <div>
    <el-form :model="addList" ref="addList" :rules="addRules">
      <el-row type="flex" justify="start">
        <el-col :span="10" :offset="1">
          <el-form-item label="项目名称" prop="projectName" class="fourLabelLeft">
            <el-input v-model="addList.projectName" :disabled="addList.isEditor"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10" :offset="1">
          <el-form-item label="项目地址" prop="projectAddress" class="fourLabelLeft">
            <el-input v-model="addList.projectAddress" :disabled="addList.isEditor"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="start">
        <el-col :span="10" :offset="1">
          <el-form-item label="合同编号" prop="code">
            <el-input v-model="addList.code"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10" :offset="1">
          <el-form-item label="合同来源" prop="source">
            <el-select v-model="addList.source" placeholder="请选择" :disabled="isSelectSource">
              <el-option
                v-for="item in selectOption.source"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="start">
        <el-col :span="10" :offset="1">
          <el-form-item label="合同类型" prop="type" class="fourLabelLeft">
            <el-select v-model="addList.type" placeholder="请选择" @change="changeSource">
              <el-option
                v-for="item in selectOption.type"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="10" :offset="1">
          <el-form-item label="台量" prop="liftNum" class="twoLabelLeft">
            <el-input v-model="addList.liftNum"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="start">
        <el-col :span="10" :offset="1">
          <el-form-item label="签约时间" prop="givenDate" class="fourLabelLeft">
            <el-date-picker
              v-model="addList.givenDate"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="10" :offset="1">
          <el-form-item label="签约人" prop="givenUser" class="twoLabelLeft">
            <el-input v-model="addList.givenUser"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="start">
        <el-col :span="10" :offset="1">
          <el-form-item label="开始时间" prop="starDate" class="fourLabelLeft">
            <el-date-picker
              v-model="addList.starDate"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="10" :offset="1">
          <el-form-item label="结束时间" prop="endDate" class="fourLabelLeft">
            <el-date-picker
              v-model="addList.endDate"
              type="date"
              placeholder="选择日期"
              value-format="yyyy-MM-dd"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="start">
        <el-col :span="10" :offset="1">
          <el-form-item label="金额" prop="moneys" class="twoLabelLeft">
            <el-input v-model="addList.moneys"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="start">
        <el-col :span="10" :offset="1">
          <el-form-item label="备注" prop="remarks">
            <el-input v-model="addList.remarks" type="textarea" :rows="3
            "></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="10" :offset="1">
          <div class>
            <span>上传附件</span>
            <span>
              <span>
                <el-upload
                  ref="fileList"
                  action="https://app.edtyun.com:8443/business/common/upload"
                  :before-remove="beforeRemove"
                  :headers="{'Authorization':token}"
                  :limit="1"
                  :on-exceed="handleExceed"
                  :on-success="handleSuceess"
                >
                  <el-button size="small" type="primary">点击上传</el-button>
                </el-upload>
              </span>
              <span></span>
            </span>
          </div>
        </el-col>
      </el-row>
      <h3>收款计划:</h3>
      <div v-if="!isSource">
        <el-row type="flex" justify="start" class="addTableHeader headerColor">
          <el-col :span="4" class="TXc">期数</el-col>
          <el-col :span="8" class="TXc">应收金额</el-col>
          <el-col :span="8" class="TXc">应收日期</el-col>
          <el-col :span="4"></el-col>
        </el-row>
        <div v-if="addList.paymentList<1" class="ftitle">暂无数据</div>
        <el-row
          v-for="(item,i) in addList.paymentList"
          :key="i"
          type="flex"
          justify="start"
          v-else
          class="MoneyInput"
        >
          <el-col :span="4">
            <div>{{item.periods}}期</div>
          </el-col>
          <el-col :span="8">
            <el-form-item :prop="'paymentList.'+i+'.planMoney'" :rules="addRules.planMoney">
              <el-input v-model="item.planMoney"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item :prop="'paymentList.'+i+'.planDate'">
              <el-date-picker
                v-model="item.planDate"
                align="right"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-button size="mini" type="success" plain @click="deleteNper(item,i)">删除</el-button>
          </el-col>
        </el-row>
        <div class="MarB10 marT10">
          <el-button @click="addCollection" type="primary" plain size="mini">添加收款期数</el-button>
        </div>
      </div>
      <div v-if="isSource">
        <el-row type="flex" justify="start" class="addTableHeader headerColor">
          <el-col :span="5" class="TXc">项目名称</el-col>
          <el-col :span="5" class="TXc">项目描述</el-col>
          <el-col :span="5" class="TXc">应收金额</el-col>
          <el-col :span="5" class="TXc">应收日期</el-col>
          <el-col :span="4"></el-col>
        </el-row>
        <div v-if="addList.paymentList<1" class="ftitle">暂无数据</div>
        <el-row
          v-for="(item,i) in addList.paymentList"
          :key="i"
          type="flex"
          justify="start"
          v-else
          class="MoneyInput">
          <el-col :span="5">
            <div>
              <el-input v-model="item.costName"></el-input>
            </div>
          </el-col>
          <el-col :span="5">
            <div>
              <el-input v-model="item.costDesc"></el-input>
            </div>
          </el-col>
          <el-col :span="5">
            <div>
              <el-form-item :prop="'paymentList.'+i+'.planMoney'" :rules="addRules.planMoney">
              <el-input v-model="item.planMoney"></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="5">
            <div><el-form-item :prop="'paymentList.'+i+'.planDate'">
              <el-date-picker
                v-model="item.planDate"
                align="right"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="选择日期"
              ></el-date-picker>
            </el-form-item></div>
          </el-col>
          <el-col :span="4">
            <el-button size="mini" type="success" plain @click="deleteNper(item,i)">删除</el-button>
          </el-col>
        </el-row>
        <div class="MarB10 marT10">
          <el-button @click="addCollection" type="primary" plain size="mini">添加收款期数</el-button>
        </div>
      </div>
    </el-form>
  </div>
</template>
<script>
import { sessionStorage } from "../../utils/storage";
export default {
  data() {
    var checkMoney = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("收款金额不能为空"));
      } else {
        return callback();
      }
    };
    var checkProject = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("项目名称不能为空"));
      } else {
        return callback();
      }
    };
    var checkmoneys = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("合同金额不能为空"));
      } else {
        return callback();
      }
    };
    var checkliftNum = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("台量不能为空"));
      } else {
        return callback();
      }
    };
    var checkGivenDate = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("签约时间不能为空"));
      } else {
        return callback();
      }
    };
    var checkgivenUser = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("签约人不能为空"));
      } else {
        return callback();
      }
    };
    var checkProjectAddress = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("项目地址不能为空"));
      } else {
        return callback();
      }
    };
    var checkstarDate = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("开始时间不能为空"));
      } else {
        return callback();
      }
    };
    var checkEndDate = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("结束时间不能为空"));
      } else {
        return callback();
      }
    };
    var checktype = (rule, value, callback) => {
      if (value === "") {
        return callback(new Error("合同类型不能为空"));
      } else {
        return callback();
      }
    };
    return {
      addList: {
        projectId: "",
        projectAddress: "",
        starDate: "",
        endDate: "",
        paymentList: "",
        code: "",
        liftNum: "",
        moneys: "",
        remarks: "",
        givenDate: "",
        givenUser: "",
        accessoryUrl: "",
        fileList: [],
        paymentList: [],
        isEditor: true
      },
      isSelectSource:true,
      selectOption: {
        source: [
          { value: "1", label: "商保新增" },
          { value: "2", label: "免保转签" },
          { value: "3", label: "续签" },
          { value: "4", label: "免保" }
        ],
        type: [
          { value: "1", label: "半包" },
          { value: "2", label: "大包" },
          { value: "3", label: "清包" },
          { value: "4", label: "全包" },
          { value: "5", label: "大修" }
        ]
      },
      addRules: {
        planMoney: [{ validator: checkMoney, trigger: "blur" }],
        projectName: [
          { required: true, validator: checkProject, trigger: "blur" }
        ],
        liftNum: [{ required: true, validator: checkliftNum, trigger: "blur" }],
        moneys: [{ required: true, validator: checkmoneys, trigger: "blur" }],
        givenDate: [
          { required: true, validator: checkGivenDate, trigger: "blur" }
        ],
        givenUser: [
          { required: true, validator: checkgivenUser, trigger: "blur" }
        ],
        projectAddress: [
          { required: true, validator: checkProjectAddress, trigger: "blur" }
        ],
        starDate: [
          { required: true, validator: checkstarDate, trigger: "change" }
        ],
        endDate: [
          { required: true, validator: checkEndDate, trigger: "change" }
        ],
        type: [{ required: true, validator: checktype, trigger: "blur" }]
      },
      token: "",
      paramFile: {},
      url: "business/contract/add",
      isSource: false,
      aIsNum:false,
    };
  },
  created() {},
  mounted() {
    this.token = this.$store.state.token;
  },
  methods: {
    addCollection() {
      let a = {
        planDate: "",
        planMoney: "",
        periods: this.addList.paymentList.length + 1
      };
      this.addList.paymentList.push(a);
    },
    handleRemove(file, fileList) {},
    beforeRemove(file, fileList) {},
    handleExceed(files, fileList) {},
    handleSuceess(response, file, fileList) {
      this.addList.accessoryUrl = response.data;
    },
    // click(file){
    //   console.log(file);
    //   var a=["xls","pdf","txt","text","rar","zip","xlsx","doc","docx","ppt","pptx"];
    //   console.log(file);
    //   var url="http://192.168.1.16:20227/common/upload/image";
    //   // this.paramFile.file=file;
    // },
    // myUpload(){

    // },
    deleteNper(item, i) {
      this.addList.paymentList.splice(i, 1);
      this.addList.paymentList.map((item, i, arr) => {
        item.periods = i + 1;
        return item;
      });
    },
    handleClose() {
      this.$refs["addList"].clearValidate();
      this.addList = {
        projectName: "",
        projectAddress: "",
        starDate: "",
        endDate: "",
        paymentList: "",
        code: "",
        liftNum: "",
        moneys: "",
        remarks: "",
        givenDate: "",
        givenUser: "",
        accessoryUrl: "",
        fileList: [],
        paymentList: []
      };
    },
    determine(index) {
      console.log(index);
      var _this = this;
      var a;
      this.$refs["addList"].validate(valid => {
        a = valid;
      });
      if (!a) return;
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "el-icon-loading",
        background: "rgba(f, f, f, 0.7)"
      });
      var url = this.url;
      var param = this.addList;
      param.contractId=this.addList.ID
      param.contracts = {
        mtCompanyId: sessionStorage.getItem("companyID").id,
        code: param.code,
        liftNum: param.liftNum,
        moneys: param.moneys,
        type: param.type,
        givenDate: param.givenDate,
        givenUser: param.givenUser,
        starDate: param.starDate,
        endDate: param.endDate,
        remarks: param.remarks,
        accessoryUrl: param.accessoryUrl,
        source: param.source
      };
      if (index == 2) {
        param.projectId = this.addList.projectId;
        url = 'business/contract/add'
      }
      if(this.aIsNum){
        param.contracts.id=this.addList.ID
      }
      if (param.isEditor) {
          param.contracts.projectId = param.pid;
      }
      this.axios.post(url, param).then(res => {
        loading.close();
        if (res.statusCode === "1") {
          if (index == 2) {
            _this.$message.success(res.message);
            _this.$emit("showProjectList");
            // _this.$parent.$parent.showProjectList();
          } else {
            this.$alert(res.message, "提示", {
              confirmButtonText: "确定",
              callback: action => {
                _this.$parent.$parent.handleClose();
                _this.$parent.$parent.getContractList2();
              }
            });
          }
        } else {
          _this.$message.error(res.message);
        }
      });
    },
    //新增还是修改
    isJudge(a,b,c,d,e) {
      this.addList = a;
      console.log(a);
      this.addList.isEditor = b;
      this.isSource=!a.type?false:a.type=="5"?true:false;
      this.$refs["addList"].clearValidate();
      this.url=c;
      this.isSelectSource=d;
      this.aIsNum=e
    },
    changeSource(e) {
       this.addList.paymentList=[];
      if (e === "5") {
        this.isSource = true;
      } else {
        this.isSource = false;
      }
    }
  }
};
</script>