<template>
  <div class="content-main">
    <div class="content-body">
      <div class="title">履约回复</div>
      <div class="content-title"></div>
      <el-row :gutter="22">
        <el-col :span="24">
          <label class="title_txt" style="display: block;padding: 10px 5px;">
            {{apcc}}，合同号{{ rowData.hth }}，计划完成时间是{{
              jhwcrq
            }}，贵司是否可以按时履约，请回复：
          </label>
        </el-col>
      </el-row>
      <el-form ref="form" :model="form" label-width="0px">
        <el-form-item
          prop="ccqyhf"
          :rules="[{ required: true, message: '回复状态不能为空' }]"
        >
          <el-row :gutter="0">
            <el-row :gutter="30">
              <el-col :span="24">
                <div class="radio">
                  <el-radio
                    :disabled="readonly"
                    v-model="form.ccqyhf"
                    label="按时完成"
                    ><span class="title_txt">按时完成</span></el-radio
                  >
                  <el-radio
                    :disabled="readonly"
                    v-model="form.ccqyhf"
                    label="不能按时完成"
                    ><span class="title_txt">不能按时完成</span></el-radio
                  >
                </div>
              </el-col>
            </el-row>
          </el-row>
        </el-form-item>

        <el-row>
          <el-col :span="24">
            <label class="label-title">回复时间:</label>
            <label>
              <el-date-picker
                v-model="form.hfsj"
                :readonly="readonly"
                type="date"
                prefix-icon="21"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
              >
              </el-date-picker>
            </label>
          </el-col>
        </el-row>
        <el-form-item
          prop="sm"
        >
          <el-row>
            <el-col :span="24">
              <label class="label-title">备注:</label>
              <label class="label-textarea">
                <el-input
                  type="textarea"
                  :readonly="readonly"
                  v-model="form.sm"
                  :rows="3"
                  placeholder="备注"
                ></el-input>
              </label>
            </el-col>
          </el-row>
        </el-form-item>
        <el-form-item>
          <el-row :gutter="0">
            <el-col :span="24">
              <div style="text-align: center; padding: 10px">
                <el-button
                  size="small"
                  type="primary"
                  class="iconfont icontijiao"
                  v-if="!readonly"
                  @click="submit('form')"
                  >提交</el-button
                >
                <el-button
                  size="small"
                  type="primary"
                  class="iconfont iconfanhui"
                  @click="getBack"
                  >返回</el-button
                >
              </div>
            </el-col>
          </el-row>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { hfhtlytx, queryDclyhById } from "@/api/ReceivingDeposit/index"
export default {
  data() {
    return {
      rowData: {},
      form: {
        hfsj: "",
        hfzt: "",
        sm: "",
        ccqyhf: "",
      },
      apcc: this.$route.query.apcc,
    };
  },
  created() {
    queryDclyhById({ id: this.$route.query.id }).then((res) => {
      if (res.infoCode == 200 && res.success) {
        this.rowData = res.data;
        if (this.rowData.hfzt == 1) {
          this.form = this.rowData;
        }else{
          this.form.hfsj = this.getNowDate();
        }
      }
    });
  },
  computed: {
    jhwcrq() {
      if (this.rowData.jhwcrq) {
        let date = this.rowData.jhwcrq.split("-");
        if (JSON.stringify(date) != "[]") {
          return `${date[0]}年${date[1]}月${date[2]}日`;
        }
      }
      return this.rowData.jhwcrq;
    },
    readonly() {
      // return this.rowData.hfzt == 1;
      return true;
    },
  },
  methods: {
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = {
            ...this.form,
            id: this.rowData.id,
            hfzt: 1,
          };
          hfhtlytx(data)
            .then((res) => {
              if (res.infoCode == 200) {
                this.$message({
                  message: res.msg,
                  type: "success",
                });
                this.$router.go(-1);
              }
            })
            .catch((res) => {
              console.log(res);
            });
        } else {
          this.$message({
            message: "请选择回复状态",
            type: "error",
          });
          return false;
        }
      });
    },
    getBack() {
      this.$router.push('index');
    },
    getNowDate() {
      let nowdays = new Date();
      let year = nowdays.getFullYear();
      let month = nowdays.getMonth() + 1;
      let date = nowdays.getDate();
      return year + "-" + month + "-" + date; //今天
    },
  },
};
</script>

<style lang="scss" scoped>
.content-body {
  padding: 15px;
//   width: 100%;
  /deep/ .el-textarea {
    width: 700px;
  }
}
.title {
  font-size: 24px;
  font-weight: 700;
  text-align: center;
  padding-bottom: 15px;
}
label {
  display: inline-block;
}

.label-title {
  padding: 10px 5px;
  text-align: right;
  min-width: 60px;
}
.label-textarea {
  margin-top: 20px;
  vertical-align: top;
}
.title_txt {
  font-size: 18px;
}
.radio {
  // padding: 15px 25px;
  text-align: left;
}
</style>
