<!--
@name: 承运物流价格-乙方弹窗
@author: 张泽贤
@time: 2023-02-24
@doc:
-->
<template>
  <div>
    <p-input v-model="inputValue" readOnly @click="onClick" :disabled="disabled" />

    <p-modal title="乙方" width="60%" :visible="visible" :confirm-loading="confirmLoading" @ok="handleOk" @cancel="visible = false">
      <p-tabs :animated="false" :activeKey="activeKey" @tabClick="activeKey = $event">
        <!-- <p-tab-pane key="1" tab="承运商" :forceRender="true">
          <p-form-model :model="searchForm">
            <a-row>
              <a-col :span="8">
                <p-form-model-item label="承运商编码" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
                  <p-input v-model="searchForm.carrierCode" />
                </p-form-model-item>
              </a-col>
              <a-col :span="8">
                <p-form-model-item label="承运商名称" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
                  <p-input v-model="searchForm.carrierName" />
                </p-form-model-item>
              </a-col>
              <a-col :span="8">
                <p-form-model-item :wrapper-col="{ span: 24 }" style="text-align: right">
                  <a-space>
                    <p-button type="primary" @clickSync="onSearch" icon="search">查询</p-button>
                    <p-button @click="onReset">重置</p-button>
                  </a-space>
                </p-form-model-item>
              </a-col>
            </a-row>
          </p-form-model>
          <p-table
            dragle
            bordered
            row-key="id"
            :data-source.sync="dataSource"
            :remote-url="listRemoteUrl"
            :remoteData="listParams"
            :rowSelectType="2"
            :selectedRowKeys.sync="selectedRowKeys"
          >
            <p-table-column data-index="code" title="承运商编号" />
            <p-table-column data-index="name" title="承运商名称" />
          </p-table>
        </p-tab-pane> -->
        <p-tab-pane key="2" tab="部门" :forceRender="true">
          <p-tree v-model="departmentValue" :tree-data="treeData" :replaceFields="{ key: 'code', title: 'name', value: 'id' }" defaultExpandAll @change="departmenTreeChange" />
        </p-tab-pane>
      </p-tabs>
    </p-modal>
  </div>
</template>

<script>
import { carrier_listRemoteUrl, organization_all } from '../js/api.js';

export default {
  props: {
    partyB: {
      type: Object,
      default: () => ({}),
    },
    disabled: {
      type: Boolean,
      default: false,
    },
  },
  watch: {
    partyB(val) {
      this.inputValue = val.PartyName.join(',');
      if (val.PartyType === 'C') {
        this.activeKey = '1';
        this.selectedRowKeys = val.PartyId;
        this.treeDefaultExpandedKeys = [];
      } else if (val.PartyType === 'D') {
        this.activeKey = '2';
        this.selectedRowKeys = [];
        this.treeDefaultExpandedKeys = val.PartyCode;
      } else {
        this.activeKey = '1';
        this.selectedRowKeys = [];
        this.treeDefaultExpandedKeys = [];
      }
    },
  },
  data() {
    return {
      visible: false,
      confirmLoading: false,
      activeKey: '2',

      inputValue: '',

      // 承运商
      searchForm: {
        carrierCode: '',
        carrierName: '',
      },
      dataSource: [],
      listRemoteUrl: carrier_listRemoteUrl,
      listParams: {},
      selectedRowKeys: [],

      // 部门
      treeData: [],
      treeDefaultExpandedKeys: [],
      departmentValue: [],
      DEPARTMENT: [],
    };
  },
  created() {
    this.organization_all();
  },
  methods: {
    onClick() {
      this.visible = true;
    },

    // 承运商
    onSearch() {
      this.listParams = { ...this.searchForm };
    },
    onReset() {
      this.searchForm = {
        carrierCode: '',
        carrierName: '',
      };
    },

    // 获取部门
    organization_all() {
      organization_all().then((res) => {
        if (res.success) {
          this.DEPARTMENT = res.data;
          this.treeData = this.resultTreeNodes(this.DEPARTMENT);
          let item = this.treeData.find((item) => item.parentId == '0');
          this.treeDefaultExpandedKeys = item?[item.id]:[];
          this.departmentValue = this.departmentId
            ? this.departmentId.split(',').map((item) => {
                return { value: item };
              })
            : [];
        } else {
          this.$exception(res);
        }
      });
    },
    resultTreeNodes(data, map = {}) {
      if (!data) return [];
      data.forEach((item) => {
        delete item.children;
        item.scopedSlots = { icon: 'custom' };
        item.isLeaf = !!item.isLeaf;

        map[item.id] = item;
      });
      let value = [];

      data.forEach((item) => {
        var p = map[item.parentId];
        if (p) {
          if (!p.children) {
            p.children = [];
          }
          //item.isLeaf = true
          p.children.push(item);
        } else {
          value.push(item);
        }
      });
      return value;
    },
    departmenTreeChange(value, label, extra) {
      console.log(value, label, extra);
      this.departmentValue = value;
      if (!value || value.length === 0) {
      } else {
        label = [];
        let _value = value.map((item) => {
          label.push(item.label);
          return item.value;
        });
        let departmentId = _value.join(),
          departmentCode = [],
          departmentName = label.join();
        this.DEPARTMENT.forEach((item) => {
          if (departmentId.includes(item.id)) {
            departmentCode.push(item.code);
          }
        });
        departmentCode = departmentCode.join();
      }
    },

    handleOk() {
      let request = {
        PartyId: [],
        PartyCode: [],
        PartyName: [],
        PartyType: '',
      };
      if (this.activeKey === '1') {
        request.PartyType = 'C';
        this.dataSource.forEach((item) => {
          if (this.selectedRowKeys.includes(item.id)) {
            request.PartyId.push(item.id);
            request.PartyCode.push(item.code);
            request.PartyName.push(item.name);
          }
        });
      } else {
        request.PartyType = 'D';
        this.DEPARTMENT.forEach((item) => {
          if (this.departmentValue.includes(item.code)) {
            request.PartyId.push(item.id);
            request.PartyCode.push(item.code);
            request.PartyName.push(item.name);
          }
        });
      }
      this.inputValue = request.PartyName.join(',');
      console.log(request);
      this.$emit('getPartyB', request);
      this.visible = false;
    },
  },
};
</script>