<template>
  <el-card shadow="never" class="aui-card--fill">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="标题" prop="title">
        <el-input v-model="ruleForm.title"></el-input>
      </el-form-item>
      <el-form-item label="物料" prop="productName">
        <el-select v-model="ruleForm.productName" filterable clearable placeholder="物料">
          <el-option
            v-for="item in productList"
            :key="item.id"
            :label="item.productName"
            :value="item.productName">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="供应商" prop="supplierName">
        <el-select v-model="ruleForm.supplierName" filterable clearable placeholder="供应商">
          <el-option
            v-for="item in supplierList"
            :key="item.id"
            :label="item.name"
            :value="item.name">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="负责人" prop="personLiableName">
        <el-select v-model="ruleForm.personLiableName" filterable clearable placeholder="供应商">
          <el-option
            v-for="item in userList"
            :key="item.id"
            :label="item.username"
            :value="item.username">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="时间节点">
        <el-date-picker
          v-model="timeSlot"
          type="daterange"
          value-format="yyyy-MM-ddTHH:mm:ss"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="背景" prop="background">
        <el-input type="textarea" v-model="ruleForm.background"></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="ment">
        <el-select v-model="ruleForm.ment" filterable clearable placeholder="状态">
          <el-option
            v-for="item in mentList"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
export default {
  data() {
    return {
      urlOptions: {
        addURL: '/supplier/qmsSupplierProjectList',
        getProductURL: '/basic/qmsProduct/page',
        getSupplierURL: '/supplier/qmsSupplier/page',
        getUserURL: '/sys/user/page'
      },
      ruleForm: {
        title: '',
        productName: '',
        supplierName: '',
        personLiableName: '',
        background: '',
        ment: 0,
        timeNodeStart: undefined,
        timeNodeEnd: undefined
      },
      mentList: [
        {
          id: 0,
          name: '实施中'
        },
        {
          id: 1,
          name: '已完成'
        }
      ],
      timeSlot: null,
      productList: [],
      userList: [],
      supplierList: [],
      rules: {
        title: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    this.getProduct()
    this.getSupplier()
    this.getUser()
  },
  methods: {
    getUser() {
      this.$http
        .get(this.urlOptions.getUserURL, {
          params: {
            limit: 999,
            page: 1
          },
        })
        .then(({ data: res }) => {
          this.dataListLoading = false;
          if (res.code !== 0) {
            this.userList = [];
            return this.$message.error(res.msg);
          }
          this.userList = res.data.list;
        })
        .catch(() => {
          this.dataListLoading = false;
        });
    },
    getSupplier() {
      this.$http
        .get(this.urlOptions.getSupplierURL, {
          params: {
            limit: 999,
            page: 1
          },
        })
        .then(({ data: res }) => {
          this.dataListLoading = false;
          if (res.code !== 0) {
            this.supplierList = [];
            return this.$message.error(res.msg);
          }
          this.supplierList = res.data.list;
        })
        .catch(() => {
          this.dataListLoading = false;
        });
    },
    getProduct() {
      this.$http
        .get(this.urlOptions.getProductURL, {
          params: {
            limit: 999,
            page: 1
          },
        })
        .then(({ data: res }) => {
          this.dataListLoading = false;
          if (res.code !== 0) {
            this.productList = [];
            return this.$message.error(res.msg);
          }
          this.productList = res.data.list;
        })
        .catch(() => {
          this.dataListLoading = false;
        });
    },
    submitForm(formName) {
      console.log('啊啊啊啊啊', this.ruleForm)
      if (this.timeSlot) {
        this.ruleForm.timeNodeStart = this.timeSlot[0]
        this.ruleForm.timeNodeEnd = this.timeSlot[1]
      } else {
        this.ruleForm.timeNodeStart = undefined
        this.ruleForm.timeNodeEnd = undefined
      }
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$http["post"](this.urlOptions.addURL, this.ruleForm)
          .then(({ data: res }) => {
            if (res.code !== 0) {
              return this.$message.error(res.msg);
            }
            this.$message({
              message: this.$t("prompt.success"),
              type: "success",
              duration: 500,
              onClose: () => {
                console.log(1111, res);
                this.$emit("refreshDataList");
                this.resetForm('ruleForm')
              },
            })
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>