<!-- 搜索表单 -->
<template>
  <el-form
    label-width="90px"
    class="ele-form-search"
    @keyup.enter.native="search"
    @submit.native.prevent
  >
    <el-row :gutter="15">
      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
        <el-form-item label="日期:">
          <el-date-picker
            v-model="where.createTime"
            type="date"
            placeholder="选择日期"
            :clearable="false"
          >
          </el-date-picker>
        </el-form-item>
      </el-col>
      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
        <el-form-item label="产品分类:">
          <el-select
            clearable
            v-model="where.categoryLevelIds"
            placeholder="请选择"
            multiple
          >
            <el-option
              v-for="item in categoryData"
              :label="item.label"
              :value="item.value"
              :key="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
        <el-form-item label="工单状态:">
          <el-select
            clearable
            v-model="where.workOrderStatusList"
            placeholder="请选择"
            multiple
          >
            <el-option
              v-for="item in orderStatus"
              :label="item.label"
              :value="item.value"
              :key="item.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>

      <el-col v-bind="styleResponsive ? { lg: 3, md: 6 } : { span: 3 }">
        <div class="ele-form-actions">
          <el-button
            type="primary"
            icon="el-icon-search"
            class="ele-btn-icon"
            @click="search"
          >
            查询
          </el-button>
          <el-button @click="reset" icon="el-icon-refresh-left" type="primary"
            >重置</el-button
          >
        </div>
      </el-col>
    </el-row>
  </el-form>
</template>

<script>
  import { getTreeByPid } from '@/api/classifyManage';
  export default {
    data() {
      const defaultWhere = {
        createTime: new Date(),
        startTime: '',
        endTime: '',
        categoryLevelIds: [],
        workOrderStatusList: []
      };
      return {
        // 表单数据
        defaultWhere: { ...defaultWhere },
        where: { ...defaultWhere },
        treeData: [],
        teamList: [],
        categoryData: [],
        orderStatus: [
          {
            value: 4,
            label: '待生产'
          },
          {
            value: 5,
            label: '生产中'
          },
          {
            value: 6,
            label: '已完成'
          },
          {
            value: 7,
            label: '已延期'
          },
          {
            value: 9,
            label: '暂停'
          },
          {
            value: 10,
            label: '终止'
          }
        ]
      };
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },

    created() {
      this.getTreeData();
    },
    methods: {
      /* 搜索 */
      search() {
        const where = { ...this.where };

        if (where.createTime) {
          const time = this.formatDate(where.createTime).split(' ')[0];
          where.startTime = time + ' 00:00:00';
          where.endTime = time + ' 23:59:59';
        }

        delete where.createTime;

        this.$emit('search', where);
      },
      /*  重置 */
      reset() {
        this.where = { ...this.defaultWhere };

        this.search();
      },
      async getTreeData() {
        try {
          const res = await getTreeByPid(9);
          const rootNode = res.data?.[0];

          if (!rootNode || !rootNode.children) {
            this.categoryData = [];
            return;
          }

          this.categoryData = rootNode.children.map((child) =>
            this.formatNode(child)
          );
        } catch (error) {
          this.categoryData = [];
        }
      },
      formatNode(node) {
        return {
          id: node.id,
          parentId: node.parentId,
          name: node.name,
          code: node.code,
          value: node.value || node.id,
          label: node.label || node.name,
          sortNum: node.sortNum
        };
      },
      formatDate(date) {
        const d = new Date(date);
        const yyyy = d.getFullYear();
        const mm = String(d.getMonth() + 1).padStart(2, '0');
        const dd = String(d.getDate()).padStart(2, '0');
        const hh = String(d.getHours()).padStart(2, '0');
        const mi = String(d.getMinutes()).padStart(2, '0');
        const ss = String(d.getSeconds()).padStart(2, '0');
        return `${yyyy}-${mm}-${dd} ${hh}:${mi}:${ss}`;
      }
    }
  };
</script>
<style lang="scss" scoped>
  .ele-form-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
</style>
