<script>
export default {
  name: "AddPurchaseTaskDrawer",
  data() {
    const arr2Obj = function (data, keyName, valueName) {
      return Object.fromEntries(
        data.map((item) => [item[keyName], item[valueName]])
      );
    };
    const pickerOptions = {
      disabledDate(time) {
        return time.getTime() > Date.now();
      },
      shortcuts: [
        {
          text: "今天",
          onClick(picker) {
            picker.$emit("pick", new Date());
          },
        },
        {
          text: "昨天",
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24);
            picker.$emit("pick", date);
          },
        },
        {
          text: "一周前",
          onClick(picker) {
            const date = new Date();
            date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit("pick", date);
          },
        },
      ],
    };
    const columns = [
      {
        title: "采购组织",
        key: "puOrg",
        type: "TagSelect",
        value: [],
        required: true,
      },
      { title: "需求来源", key: "source", type: "Input", value: "采购创建" },
      { title: "采购员", key: "buyer", value: [], type: "TagSelect" },
      { title: "交易类型", key: "billYpe", value: [], type: "TagSelect" },
      { title: "物料编码", key: "material", type: "Input", required: true },
      {
        title: "物料名称",
        key: "materialName",
        type: "TagSelect",
        value: [],
        required: true,
      },
      {
        title: "物料/物料描述",
        key: "materialDesc",
        type: "TagSelect",
        value: [],
        required: true,
      },
      { title: "生产厂家", key: "manufacturer", type: "Input" },
      { title: "收货客户", key: "customer", type: "TagSelect", value: [] },
      {
        title: "采购单位",
        key: "puUnit",
        type: "TagSelect",
        value: [],
        required: true,
      },
      {
        title: "采购数量",
        key: "puQty",
        type: "InputNumber",
        required: true,
      },
      {
        title: "需求时间",
        key: "demandDate",
        type: "DatePicker",
        config: { type: "date", pickerOptions: pickerOptions },
      },
      { title: "项目名称", key: "projectName", type: "TagSelect", value: [] },
      { title: "需求人", key: "demandPersonal", type: "TagSelect", value: [] },
      {
        title: "需求组织",
        key: "demandOrg",
        type: "TagSelect",
        value: [],
        require: true,
      },
      { title: "需求部门", key: "demandDept", type: "TagSelect", value: [] },
      { title: "建议供应商", key: "supplier", type: "TagSelect", value: [] },
      { title: "收货人", key: "a", type: "TagSelect", value: [] },
      { title: "收货组织", key: "b", type: "TagSelect", value: [] },
      { title: "收货人联系方式", key: "c", type: "Input" },
      { title: "收货地址", key: "d", type: "Input" },
      { title: "收货仓库", key: "e", type: "TagSelect", value: [] },
      {
        title: "指定供应商",
        key: "assignSupplier",
        type: "TagSelect",
        value: [],
      },
      { title: "单位", key: "unit", type: "TagSelect", value: [] },
      { title: "收货地址", key: "f", type: "TagSelect", value: [] },
    ];
    const initColumns = () => columns;
    const initParams = () => arr2Obj(initColumns(), "key", "value");
    return {
      visible: false,
      columns: initColumns(),
      params: initParams(),
      options: [
        {
          value: "选项1",
          label: "黄金糕",
        },
        {
          value: "选项2",
          label: "双皮奶",
        },
        {
          value: "选项3",
          label: "蚵仔煎",
        },
        {
          value: "选项4",
          label: "龙须面",
        },
        {
          value: "选项5",
          label: "北京烤鸭",
        },
      ],
    };
  },
  computed: {},
  watch: {},
  methods: {
    setVisible(prop) {
      this.visible = prop;
    },
  },
  created() {
    console.log(this.params);
  },
  mounted() {},
  destroyed() {},
};
</script>
<template>
  <el-drawer
    title="我是标题"
    direction="btt"
    size="100%"
    :with-header="false"
    :visible.sync="visible"
    :before-close="handleClose"
  >
    <el-form
      size="mini"
      label-position="right"
      label-width="125px"
      :model="params"
    >
      <el-card
        :body-style="{
          padding: '20px',
          display: 'flex',
          'flex-wrap': 'wrap',
        }"
        style="margin: 10px"
      >
        <el-form-item
          v-for="(column, index) in columns"
          :key="index"
          :prop="column.key"
          :label="column.title"
          :required="column.required"
          style="width: 33%"
        >
          <el-input
            v-if="column.type === 'Input'"
            v-model="params[column.key]"
            :placeholder="column.placeholder"
            style="width: 90%"
          ></el-input>
          <el-input-number
            v-if="column.type === 'InputNumber'"
            v-model="params[column.key]"
            controls-position="right"
            :placeholder="column.placeholder"
            style="width: 90%"
          ></el-input-number>
          <el-select
            v-if="column.type === 'TagSelect'"
            v-model="params[column.key]"
            multiple
            clearable
            collapse-tags
            :placeholder="column.placeholder"
            style="width: 90%"
          >
            <template #prefix>
              <el-icon
                class="el-icon-s-operation"
                style="cursor: pointer"
                @click.stop="$message.info(234)"
              ></el-icon>
            </template>
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <el-date-picker
            v-if="column.type === 'DatePicker'"
            v-model="params[column.key]"
            :type="column.config.type"
            :placeholder="column.placeholder"
            :picker-options="column.pickerOptions"
            style="width: 90%"
          >
          </el-date-picker>
        </el-form-item>
      </el-card>
      <el-card
        :body-style="{
          'text-align': 'right',
          padding: '10px 20px',
        }"
        style="
          position: fixed;
          left: 0;
          bottom: 0;
          margin: 10px;
          width: calc(100% - 20px);
        "
      >
        <el-button size="mini" @click="setVisible(false)">取消</el-button>
        <el-button size="mini" type="info" @click="setVisible(false)"
          >保存并新增</el-button
        >
        <el-button size="mini" type="danger" @click="setVisible(false)"
          >保存</el-button
        >
      </el-card>
    </el-form>
  </el-drawer>
</template>
