<template>
  <el-dialog
    :title="title"
    append-to-body
    :modelValue="openShow"
    width="70%"
    @close="closeDialog"
  >
    <el-form
      ref="form"
      :model="projectForm"
      :rules="projectRules"
      label-width="100px"
      v-show="title == '新增' || title == '编辑'"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="项目名称：" prop="tpProject">
            <el-select filterable v-model="projectForm.tpProject" placeholder="请选择项目" @change="tpProjectChange" value-key="id">
              <el-option v-for="(item,index) in  projectOption" :key="index" :label="item.name" :value="item.id"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="试验条件：" prop="condition">
            <el-input
              disabled
              v-model="projectForm.condition"
              placeholder="请输入试验条件"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="试验标准：" prop="standard">
            <el-input
              disabled
              v-model="projectForm.standard"
              placeholder="请输入试验标准"
            ></el-input>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="镀种：" prop="plateId">
            <el-select v-model="projectForm.plateId">
              <el-option label="镀种一" value="1"></el-option>
              <el-option label="镀种二" value="2"></el-option>
              <el-option label="镀种三" value="3"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="试验件：" prop="testMaterialId">
            <el-select v-model="projectForm.testMaterialId" placeholder="请选择试验件">
              <el-option label="零件" :value="1"></el-option>
              <el-option label="试片" :value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="工艺员：" prop="processUserId">
            <el-select v-model="projectForm.processUserId" placeholder="请选择工艺员">
              <el-option label="张三" :value="1"></el-option>
              <el-option label="李四" :value="0"></el-option>
            </el-select>
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="试验时长：" prop="testDuration">
            <el-input-number
              v-model="projectForm.testDuration"
              controls-position="right"
              @change="handleChange"
              :min="1"
            >
            </el-input-number>
            <span style="margin-left: 5px">天</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="提前下发：" prop="genBefore">
            <el-input-number
              v-model="projectForm.genBefore"
              controls-position="right"
              @change="handleChange"
              :min="1"
            >
            </el-input-number>
            <span style="margin-left: 5px">天</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item label="临期提醒：" prop="remind">
            <el-input-number
              v-model="projectForm.remind"
              controls-position="right"
              @change="handleChange"
              :min="projectForm.testDuration"
            >
            </el-input-number>
            <span style="margin-left: 5px">天</span>
          </el-form-item>
        </el-col>

        <el-col :span="10">
          <el-form-item label="试验周期" prop="jobType">
            <el-select
              placeholder="请选择试验周期"
              v-model="projectForm.jobType"
              style="width: 268px"
              @change="changeCycle"
            >
              <el-option label="每周" :value="1"></el-option>
              <el-option label="每月" :value="2"></el-option>
              <el-option label="每年" :value="3"></el-option>
            </el-select>
          </el-form-item>
          <div style="margin-left: 100px" v-show="projectForm.jobType == 1">
            <el-checkbox-group v-model="projectForm.jobTypeWeekValue">
              <el-checkbox label="周一" value="周一" />
              <el-checkbox label="周二" value="周二"></el-checkbox>
              <el-checkbox label="周三" value="周三"></el-checkbox>
              <el-checkbox label="周四" value="周四"></el-checkbox>
              <el-checkbox label="周五" value="周五"></el-checkbox>
              <el-checkbox label="周六" value="周六"></el-checkbox>
              <el-checkbox label="周日" value="周日"></el-checkbox>
            </el-checkbox-group>
          </div>
          <div style="margin-left: 100px" v-show="projectForm.jobType == 2">
            <div style="display: flex; align-items: center">
              <span>时间：每月</span>
              <el-select v-model="projectForm.monthValue" style="width: 120px; margin: 0 5px">
                <el-option v-for="item in 31" :key="item" :label="item" :value="item"></el-option>
              </el-select>
              <span>日</span>
              <el-button style="margin-left: 10px" type="primary" circle @click="addMonth"
                ><el-icon> <Plus /> </el-icon
              ></el-button>
            </div>
            <div style="display: flex; flex-wrap: wrap; margin-top: 10px">
              <el-tag
                v-for="tag in monthTags"
                :key="tag"
                closable
                type="info"
                style="width: 62px; margin-right: 5px; margin-top: 10px"
                @close="closeMonthTag(tag, index)"
              >
                {{ tag }}
              </el-tag>
            </div>
            <div>
              <el-checkbox
                v-model="projectForm.monthChecked"
                label="任务若遇周末或当月无该日期，顺延至下周一"
              />
            </div>
          </div>
          <div style="margin-left: 100px" v-show="projectForm.jobType == 3">
            <div style="display: flex; align-items: center">
              <span>时间</span>
              <el-select v-model="projectForm.yearMonth" style="width: 120px; margin: 0 5px">
                <el-option v-for="item in 12" :key="item" :label="item" :value="item"></el-option>
              </el-select>
              <span>月</span>
              <el-select v-model="projectForm.yearDays" style="width: 120px; margin: 0 5px">
                <el-option v-for="item in 31" :key="item" :label="item" :value="item"></el-option>
              </el-select>
              <span>日</span>
              <el-button style="margin-left: 10px" type="primary" circle @click="addYears"
                ><el-icon> <Plus /> </el-icon
              ></el-button>
            </div>
            <div style="display: flex; flex-wrap: wrap; margin-top: 10px">
              <el-tag
                v-for="(tag, index) in yearTags"
                :key="tag"
                closable
                type="info"
                style="width: 86px; margin-right: 5px; margin-top: 10px"
                @close="closeYearsTag(tag, index)"
              >
                {{ tag }}
              </el-tag>
            </div>
            <div>
              <el-checkbox
                v-model="projectForm.yearChecked"
                label="任务若遇周末或当月无该日期，顺延至下周一"
              />
            </div>
          </div>
        </el-col>
      </el-row>
    </el-form>
    <div v-show="title == '详情'">
      <div style="font-weight: 550; margin-bottom: 20px">检测信息</div>
      <el-row :gutter="20" style="padding: 5px 0">
        <el-col :span="6"
          >镀种：{{
            projectForm.plateId == '1' ? '镀种一' : projectForm.plateId == '2' ? '镀种二' : '镀种三'
          }}</el-col
        >
        <el-col :span="6">试验件：{{ projectForm.testMaterialId }}</el-col>
        <el-col :span="6"><span>试验项目：</span></el-col>
        <el-col :span="6"
          >试验标准：<span style="color: #1890ff">{{ projectForm.standard }}</span></el-col
        >
      </el-row>
      <el-row :gutter="20" style="padding: 5px 0">
        <el-col :span="6">试验条件：{{ projectForm.condition }}</el-col>
        <el-col :span="6"
          >工艺员：{{ projectForm.processUserId && projectForm.processUserId.userName }}</el-col
        >
        <el-col :span="6">提前下发天数：{{ projectForm.genBefore }}</el-col>
        <el-col :span="6">试验时长：{{ projectForm.testDuration }}</el-col>
      </el-row>
      <el-row :gutter="20" style="padding: 5px 0">
        <el-col :span="6">临期提醒天数：{{ projectForm.remind }}</el-col>
        <el-col :span="6"
          >试验周期：{{ projectForm.jobTypeTitle
          }}{{ projectForm.tags && projectForm.tags.length }}次
          <div style="margin-left: 60px">
            <el-tag
              v-for="tag in projectForm.tags"
              :key="tag"
              type="info"
              style="width: 86px; margin-right: 5px; margin-top: 10px"
            >
              {{ tag }}
            </el-tag>
          </div>
        </el-col>
        <el-col :span="6">维护人：{{ projectForm.updateUser }}</el-col>
        <el-col :span="6">更新完成时间：{{ projectForm.updateTime }}</el-col>
      </el-row>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </template>
  </el-dialog>
</template>
<script>
import { getList} from '@/api/qualityManagement/periodicTesting/testProject.js';

export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
    title:{
        type:String,
        default:''
    }
  },
  data() {
    return {
      openShow: false,
      projectOption:[],
      projectForm: {},
      projectRules: {
        tpProject: [{ required: true, message: '请输入项目名称', trigger: 'blur' }],
        testMaterialId: [{ required: true, message: '请选择试验件', trigger: 'blur' }],
        processUserId: [{ required: true, message: '请选择工艺员', trigger: 'blur' }],
        remind: [{ required: true, message: '请选择超期提醒', trigger: 'blur' }],
        jobType: [{ required: true, message: '请选择试验周期', trigger: 'blur' }],
      },
    };
  },
  mounted() {
    this.openShow = this.showDialog;
    this.getProject()
  },
  methods: {
    closeDialog() {
      this.openShow = false;
      this.$emit('closeDialog');
    },
    getProject(){
        getList(1,999999).then(res=>{
            this.projectOption = res.data.data.records
        })
    },
    tpProjectChange(val){
        let selectedOption = this.projectOption.find(option => option.id === val);
        this.projectForm.condition = selectedOption.condition
        this.projectForm.standard = selectedOption.standard
        
    },  
    // 切换周期
    changeCycle() {
      this.projectForm.monthValue = '';
      this.projectForm.weekList = [];
      this.monthTags = [];
      this.projectForm.yearMonth = '';
      this.projectForm.yearDays = '';
      this.yearTags = [];
    },
    // 添加月份日期
    addMonth() {
      let value = this.projectForm.monthValue + '日';
      if (this.monthTags.find(item => item == value)) return;
      this.monthTags.push(this.projectForm.monthValue + '日');
    },
    // 添加年份日期
    addYears() {
      let value = this.projectForm.yearMonth + '月' + this.projectForm.yearDays + '日';
      if (this.yearTags.find(item => item == value)) return;
      if (this.projectForm.yearMonth == '' || this.projectForm.yearDays == '') return;
      this.yearTags.push(this.projectForm.yearMonth + '月' + this.projectForm.yearDays + '日');
    },
    // 删除月份日期
    closeMonthTag(item, index) {
      this.monthTags = this.monthTags.filter(tags => tags != item);
    },
    // 删除年份日期
    closeYearsTag(item, index) {
      this.yearTags = this.yearTags.filter(tags => tags != item);
    },

    submit(){
        
    },
  },
};
</script>
<style lang="scss" scoped></style>
