<template>
    <div
      id="element-main"
      class="EditPackagingMaterial"
    >
      <Form
        ref="formModel"
        :model="formModel"
        :rules="formRule"
        label-position="top"
      >
        <FormItem
          label="请选择包材"
          prop="PackagingMaterial"
        >
          <Select
            v-model="formModel.PackagingMaterial"
            filterable
          >
            <Option
              v-for="item in PackagingMaterials"
              :key="item.id"
              :value="item.id"
            >
              {{ item.name }}
            </Option>
          </Select>
        </FormItem>
      </Form>
      <businessButton :btn-config="btnConfig" />
    </div>
  </template>
  
  <script lang="js">
    import businessButton from 'professionalComponents/businessButton';
    import common from '@yunque/service/modules/common';
    import { showModalFcError } from '@yunque/service/modules/utils';
  
    const R3 = window.R3;
    const { network, urlSearchParams, store } = R3;
  
    export default {
      name: 'EditPackagingMaterial',
      components: {
        businessButton
      },
      async created() {
        const params = {
          searchdata: {
            "range":1000,
            "startindex":0,
            "isdroplistsearch":true,
            "refcolid":211630,
            "isdetail":true
          }
        };
        network.post('/p/cs/QueryList', urlSearchParams(params)).then(res => {
          if (res.data.code == 0) {
            let PackagingMaterials = [];
            res.data.data.row.forEach(item => {
              let obj = {
                name: item.MATERIAL_NAME.val,
                id: String(item.ID.val)
              };
              PackagingMaterials.push(obj);
            })
            this.PackagingMaterials = PackagingMaterials;
          }
        });
      },
      props: {
        idArray: { // 获取ID用于多选
          type: Array,
          default: () => []
        },
        itemId: {// 获取当前子表表名
          type: String,
          default: () => ''
        }
      },
      data() {
        return {
          selectRows: [], // 选择的行数据
          PackagingMaterials:[], // 包材数据
          formModel: {
            PackagingMaterial: ''
          },
          formRule: {
            PackagingMaterial: [
              { required: true, message: '请选择包材', trigger: 'blur' }
            ]
          },
          btnConfig: {
            typeAll: 'error', // 按钮统一风格样式
            btnsite: 'right', // 按钮位置 (right , center , left)
            buttons: [
              {
                type: '', // 按钮类型
                text: '取消', // 取消 按钮文本
                icon: '', // 按钮图标
                size: '', // 按钮大小
                disabled: false, // 按钮禁用控制
                btnclick: () => {
                  this.$emit('closeActionDialog', false);
                } // 按钮点击事件
              },
              {
                type: '', // 按钮类型
                text: '确定', // 按钮文本
                icon: '', // 按钮图标
                size: '', // 按钮大小
                disabled: false, // 按钮禁用控制
                btnclick: () => {
                  this.submit();
                }, // 按钮点击事件
              }
            ]
          }
        };
      },
      methods: {
        submit() {
          this.$refs.formModel.validate(async (valid) => {
            if (!valid) {
              return;
            }
            let params = {
              "ids": this.idArray,
              "packaging_material_id": this.formModel.PackagingMaterial
            }
            network.post('/p/cs/order_material', params).then(res=> {
              if (res.data.code !== 0) {
                this.$Message.error(res.data.message || '');
              } else{
                this.$emit('closeActionDialog', true)
                this.$Message.success('修改包材成功');
              }
            })
          })
        },
      }
    };
  </script>
  <style lang = 'less'>
  .EditPackagingMaterial .ark-select-single .ark-select-selection {
    height: 32px;
  }
  </style>
  <style scoped>
    #element-main {
      width: 400px;
    }
  </style>
  