<template>
  <div class="index_box">
    <div class="c_header_title">
      <div class="c_title">委外记录</div>
    </div>
    <div>
      <el-form
        label-width="100px"
        :rules="rules"
        ref="form"
        :model="attributeData"
      >
        <el-form-item label="委外名称:" prop="name">
          <el-input
            placeholder=""
            v-model="attributeData.name"
            style="width: 260px"
          ></el-input>
        </el-form-item>

        <el-form-item label="委外类型:" prop="type">
          <el-select
            v-model="attributeData.type"
            placeholder="请选择"
            style="width: 260px"
          >
            <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="委外数量:" prop="formedNumLast">
          <el-input
            placeholder="请输入委外数量"
            type="number"
            v-model="attributeData.formedNumLast"
            style="width: 260px"
          ></el-input>
        </el-form-item>
        <el-form-item label="委外到:" prop="taskIds">
          <el-select
            v-model="attributeData.taskIds"
            placeholder="请选择"
            style="width: 260px"
            @change="changeTaskId"
          >
            <el-option
              v-for="item in newStepsList"
              :key="item.taskId"
              :label="item.taskTypeName"
              :value="item.taskId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="委外场景:" prop="sceneText">
          <el-input
            placeholder=""
            v-model="attributeData.sceneText"
            disabled
            style="width: 260px"
          ></el-input>
        </el-form-item>
        <!-- v-if="attributeData.isFirstTask != 1" -->
        <el-form-item label="直接入库:" borderBottom prop="warehouseId">
          <div style="display: flex">
            <div
              style="font-size: 15px"
              v-if="attributeData.clientEnvironmentId == 2"
              >是</div
            >
            <!-- <el-checkbox-group v-model="isInWarehouse" size="15px" v-if="attributeData.clientEnvironmentId != 2 ">
                            <el-checkbox labelSize="15px" iconSize="10px" activeColor="#157A2C" name="true"
                                label="是"></el-checkbox>
                        </el-checkbox-group> -->
            <!-- <el-checkbox labelSize="15px" iconSize="10px" v-model="isInWarehouse" activeColor="#157A2C" name="true"
                                label="是" v-if="attributeData.clientEnvironmentId != 2 "></el-checkbox> -->
            <el-select
              v-if="attributeData.clientEnvironmentId == 2 || isInWarehouse"
              v-model="attributeData.warehouseId"
              placeholder="请选择"
              style="width: 222px"
            >
              <el-option
                v-for="item in warehouseList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </div>
        </el-form-item>

        <el-form-item
          label="工艺路线:"
          borderBottom
          style="font-size: 15px"
          prop="produceRoutingId"
          v-if="
            attributeData.clientEnvironmentId != 2 &&
            attributeData.isFirstTask != 1 &&
            isInWarehouse &&
            isInWarehouse.length == 0
          "
        >
          <el-select
            v-model="attributeData.produceRoutingId"
            placeholder="请选择"
            style="width: 260px"
          >
            <el-option
              v-for="item in produceList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="计划交期:" prop="requireDeliveryTime">
          <el-date-picker
            v-model="attributeData.requireDeliveryTime"
            value-format="yyyy-MM-dd HH:mm:ss"
            style="width: 260px"
            type="date"
            placeholder="选择日期"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>

      <div class="btn-box">
        <el-button type="primary" @click="confirm">确认</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import { getWarehouseList, producerouting } from '@/api/produce/index.js';
  export default {
    components: {},
    data() {
      return {
        attributeData: {
          name: '',
          type: '', //类型
          sceneText: '', //场景
          formedNumLast: '', //数据
          taskIds: '', //委外到
          isFirstTask: '',
          clientEnvironmentId: 1, //直接入库
          requireDeliveryTime: '', //计划交期
          warehouseId: '', //仓库id
          produceRoutingId: '' //工艺路线id
        },
        isInWarehouse: true,
        produceList: [],
        warehouseList: [],
        newStepsList: [],
        typeList: [
          {
            id: 4,
            name: '带料生产委外'
          },
          {
            id: 5,
            name: '不带料生产委外'
          }
        ],
        rules: {
          name: [
            { required: true, message: '请输入委外名称', trigger: 'blur' }
          ],
          type: [
            { required: true, message: '请选择委外类型', trigger: 'blur' }
          ],
          formedNumLast: [
            { required: true, message: '请输入委外数量', trigger: 'blur' }
          ],
          taskIds: [{ required: true, message: '请选择', trigger: 'blur' }],
          sceneText: [
            { required: true, message: '请选择委外场景', trigger: 'blur' }
          ],
          warehouseId: [{ required: true, message: '请选择', trigger: 'blur' }],
          requireDeliveryTime: [
            { required: true, message: '请选择计划交期时间', trigger: 'blur' }
          ]
        },

        loading: false,
        operationType: null,
        workListIds: []
      };
    },
    props: {
      outsourceFormVal: {
        type: Object,
        default: () => ({})
      }
    },

    watch: {
      outsourceFormVal: {
        handler(val) {
          console.log(val, 'outsourceForm');
          Object.assign(this.attributeData, val);
          this.newStepsList = this.attributeData.newStepsList;
          this.getWarehouseFn();
          this.produceFn();
        },
        deep: true,
        immediate: true
      }
    },
    computed: {
      taskObj() {
        return this.$store.state.user.taskObj;
      }
    },
    methods: {
      // 工艺路线
      produceFn() {
        let param = {
          pageNum: 1,
          size: -1,
          routeType: 2
        };
        producerouting(param).then((res) => {
          this.produceList = res.list;
        });
      },

      // 仓库
      getWarehouseFn() {
        getWarehouseList().then((res) => {
          console.log(res, '仓库数据');
          this.warehouseList = res.data;
        });
      },

      changeTaskId(e) {
        console.log(e);
        const arr = this.newStepsList.find((item) => item.taskId === e);

        if (this.newStepsList.length) {
          const id = this.newStepsList[0].sourceTaskId;
          //isFirstTask 1是首工序 0不是
          if (this.attributeData.isFirstTask) {
            this.attributeData.sceneText = '首工序';
            this.attributeData.outsourceScene = 1;
            if (arr.sourceTaskId !== id) {
              this.attributeData.sceneText = '首工序及多工序';
              this.attributeData.outsourceScene = 4;
            }
          } else {
            if (arr.sourceTaskId === id) {
              // 单工序
              this.attributeData.sceneText = '单工序';
              this.attributeData.outsourceScene = 2;
            } else {
              //多工序
              this.attributeData.sceneText = '多工序';
              this.attributeData.outsourceScene = 3;
            }
          }
        } else {
          uni.showToast({
            title: '委外到工序为空',
            icon: 'none'
          });
        }
      },

      //跳转

      confirm() {
        this.$refs.form.validate((valid) => {
          if (valid) {
            console.log(this.attributeData, '11111187887877');
            this.$emit('changePlugIn', this.attributeData);
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      }
    },
    created() {
      this.operationType = null;
      this.workListIds = [];
    }
  };
</script>

<style scoped>
  .index_box {
    padding: 0 !important;
  }

  .c_header_title {
    display: flex;
    align-items: center;
    margin-bottom: 0;
    padding-left: 20px;
    height: 52px;
    margin-bottom: 10px;
    box-sizing: border-box;
    background: var(--table-header-background-color);
    border-bottom: 1px solid var(--border-color-lighter);
  }

  .c_title {
    color: #157a2c;
    font-size: 16px;
    font-weight: bold;
  }

  .btn-box {
    margin-left: 50px;
  }
</style>
