<!--
@name: 仓库管理-车位编辑查看
@author: 张泽贤
@time: 2022-07-13
@doc: PROLOG_UPCloudSolutionForTMS__v1.2.1_基础数据_1.2.1.doc
-->
<template>
  <p-spin :spinning="spinning">
    <p-card>
      <div slot="title" style="display: flex; align-items: center; cursor: pointer">
        <a-icon type="arrow-left" style="color: #1990ff" @click="back" />
        车位管理-{{ typeTitle }}
      </div>
      <div slot="extra" v-show="type !== 'parkingView'">
        <p-button type="primary" @click="onSave">保存</p-button>
      </div>
    </p-card>
    <p-card>
      <p-form-model ref="ruleForm" class="plg-grid-from" :model="form" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" :rules="rules">
        <a-row>
          <a-col :span="6">
            <p-form-model-item label="车位编码" prop="code">
              <div v-if="type === 'parkingView'">{{ form.code }}</div>
              <p-input v-model="form.code" :disabled="type === 'parkingEdit'" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="车位名称" prop="name">
              <div v-if="type === 'parkingView'">{{ form.name }}</div>
              <p-input v-model="form.name" :disabled="type === 'parkingEdit'" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="描述" prop="description">
              <div v-if="type === 'parkingView'">{{ form.description }}</div>
              <p-input v-model="form.description" v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="类型" prop="type">
              <div v-if="type === 'parkingView'">{{ form.typeName }}</div>
              <p-select v-model="form.type" :options="options.CARPORT_TYPE" allowClear v-else />
            </p-form-model-item>
          </a-col>
        </a-row>
        <a-row>
          <a-col :span="6">
            <p-form-model-item label="适用车型" prop="carType">
              <div v-if="type === 'parkingView'">{{ form.carTypeName }}</div>
              <p-select v-model="form.carType" :options="options.VEHICLE_TYPE_CATEGORY" allowClear v-else />
            </p-form-model-item>
          </a-col>
          <a-col :span="6">
            <p-form-model-item label="操作员" prop="operatorNames">
              <div v-if="type === 'parkingView'">{{ form.operatorNames }}</div>
              <p-search-modal v-model="form.operatorNames" v-bind="userAttr" @change="(...args) => onFormChange('user', ...args)" v-else />
            </p-form-model-item>
          </a-col>
        </a-row>
        <a-divider orientation="left" v-if="mextendedField_list.length">扩展属性</a-divider>
        <extendedField :mextendedField_list="mextendedField_list" :type="type" :form="form"></extendedField>
      </p-form-model>
    </p-card>
  </p-spin>
</template>

<script>
import extendedField from '@/blocks/extendedField';
import * as $formItems from '@/blocks/components/searchModalConfig/index';

import { viewCarport, saveCarport, updateCarport } from '../js/api';

export default {
  components: { extendedField },
  props: {
    type: '',
    editId: {
      type: String,
      default: '',
    },
    branchid: {
      type: String,
      default: '',
    },
    options: {
      type: Object,
      default: () => ({}),
    },
    mextendedField_list: {
      type: Array,
      default: () => [],
    },
  },
  computed: {
    typeTitle() {
      const dictionary = {
        parkingAdd: '新增',
        parkingEdit: '编辑',
        parkingView: '查看',
        parkingCopy: '复制',
      };
      return dictionary[this.type] || this.type;
    },
    userAttr() {
      let userAttr = $formItems.userAttr;
      userAttr.tableConfig.rowSelectType = 2;
      return userAttr;
    },
  },
  data() {
    return {
      $formItems,
      spinning: false,
      form: {
        operatorIds: '',
        operatorNames: '',
      },
      rules: {
        code: [{ required: true, message: '车位编码不能为空', trigger: 'blur' }],
        name: [{ required: true, message: '车位名称不能为空', trigger: 'blur' }],
        type: [{ required: true, message: '类型不能为空', trigger: 'change' }],
      },
    };
  },
  mounted() {
    if (this.editId) {
      this.spinning = true;
      viewCarport({ id: this.editId })
        .then((res) => {
          if (res.success) {
            if (this.type === 'parkingCopy') {
              res.data.code = '';
              res.data.name = '';
            }
            this.form = { ...res.data };
          } else {
            this.$exception(res);
          }
        })
        .finally(() => {
          this.spinning = false;
        });
    }
  },
  methods: {
    back() {
      this.$emit('back', { id: this.branchid });
    },
    onSave() {
      this.$refs.ruleForm.validate((valid) => {
        if (!valid) return;
        if (this.type === 'parkingAdd' || this.type === 'parkingCopy') this.onMethod(saveCarport);
        if (this.type === 'parkingEdit') this.onMethod(updateCarport);

        return;
      });
    },
    onMethod(method) {
      let params = { ...this.form };
      params.branchid = this.branchid;
      this.spinning = true;
      method(params)
        .then((res) => {
          if (res.success) {
            this.$message.success(res.message);
            this.$emit('back', { id: this.branchid });
          } else {
            this.$exception(res);
          }
        })
        .finally(() => {
          this.spinning = false;
        });
    },

    onFormChange(name, ...args) {
      console.log(args);
      if (name === 'user') {
        if (!args[1]) {
          this.$set(this.form, 'operatorIds', '');
          this.$set(this.form, 'operatorNames', '');
        } else {
          let oldIdSet = new Set(this.form.operatorIds ? this.form.operatorIds.split(',') : '');
          let oldNameSet = new Set(this.form.operatorNames ? this.form.operatorNames.split(',') : '');
          args[2].forEach((item) => {
            oldIdSet.add(item.id);
            oldNameSet.add(item.nickname);
          });
          this.$set(this.form, 'operatorIds', [...oldIdSet].join(','));
          this.$set(this.form, 'operatorNames', [...oldNameSet].join(','));
        }
      }
    },
  },
};
</script>

<style lang='less' scoped>
::v-deep .ant-calendar-picker {
  width: 100%;
}
</style>
