<template>
  <div class="container">
    <div>
      <div class="title">
        <div class="label">实体</div>
        <el-tooltip
          class="item"
          effect="dark"
          content="关联"
          placement="bottom"
        >
          <span
            class="search"
            @click="lineclick(1)"
          ><i class="el-icon-search" /></span>
        </el-tooltip>
      </div>
      <div class="list">
        <div
          v-for="(options, i) in arr"
          :key="i"
          class="label"
        >
          <div>编码：10000</div>
          <div>名称：总行</div>
        </div>
      </div>
      <div class="title">
        <div class="label">业务机构</div>
        <el-tooltip
          class="item"
          effect="dark"
          content="关联"
          placement="bottom"
        >
          <span
            class="search"
            @click="lineclick(2)"
          ><i class="el-icon-search" /></span>
        </el-tooltip>
      </div>
      <div class="list">
        <div
          v-for="(options, i) in arr"
          :key="i"
          class="label"
        >
          <div>编码：10000</div>
          <div>名称：总行</div>
        </div>
      </div>
      <div class="title">
        <div class="label">交易对手组</div>
        <el-tooltip
          class="item"
          effect="dark"
          content="关联"
          placement="bottom"
        >
          <span
            class="search"
            @click="lineclick(3)"
          ><i class="el-icon-search" /></span>
        </el-tooltip>
      </div>
      <div class="list">
        <div
          v-for="(options, i) in arr"
          :key="i"
          class="label"
        >
          <div>编码：10000</div>
          <div>名称：总行</div>
        </div>
      </div>
    </div>

    <!-- 关联 -->
    <el-dialog
      title="关联"
      :visible.sync="visible"
      width="500px"
    >
      <div class="searchbox">
        <div
          class="add"
          @click="handleAdd"
        ><i class="el-icon-plus" /></div>
        <el-input
          v-model="input"
          size="mini"
          class="search"
          style="width: 280px"
          placeholder="请输入内容"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="handleSearch"
          />
        </el-input>
      </div>
      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column
          type="selection"
          width="30"
        />
        <el-table-column
          label="编码"
          width="120"
        >
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="名称"
          width="120"
        />
      </el-table>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="mini"
          @click="visible = false"
        >取 消</el-button>
        <el-button
          size="mini"
          type="primary"
          @click="visible = false"
        >确 定</el-button>
      </span>
    </el-dialog>

    <!-- 实体 -->
    <el-dialog
      title="新增"
      :visible.sync="visibleAdd"
      width="500px"
    >
      <div class="formbox">
        <publicForm
          ref="publicForm"
          :form-arr="formArr"
          :form-data="formData"
        />
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          size="mini"
          type="primary"
          @click="visibleAdd = false"
        >保 存</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import publicForm from '@/components/form/index.vue';
export default {
  components: { publicForm },
  data() {
    return {
      arr: [{}, {}, {}, {}, {}, {}],
      num: 1,
      visible: false,
      visibleAdd: false,
      tableData: [
        {
          date: '2016-05-03',
          name: '王小虎',
        },
        {
          date: '2016-05-02',
          name: '王小虎',
        },
        {
          date: '2016-05-04',
          name: '王小虎',
        },
        {
          date: '2016-05-01',
          name: '王小虎',
        },
      ],
      multipleSelection: [],
      formArr: [],
      formData: {},
    };
  },
  async mounted() {
    // this.getData();
  },
  methods: {
    lineclick(num) {
      this.num = num;
      if (num === 1) {
        // 实体
      } else if (num === 2) {
        // 业务机构
      } else {
        // 交易对手组
      }
      this.visible = true;
    },
    handleSearch() {
      // 搜索
    },
    handleAdd() {
      this.formArr = [];

      if (this.num === 1) {
        // 实体
        this.formArr = [
          {
            type: 'input',
            prop: 'input1',
            attrs: {
              label: '编码',
              needStar: true,
            },
            rules: { required: true, message: '请输入文本' },
          },
          {
            type: 'input',
            prop: 'input2',
            attrs: {
              label: '短名',
              needStar: true,
            },
            rules: { required: true, message: '请输入文本' },
          },
          {
            type: 'input',
            prop: 'input3',
            attrs: {
              label: '名称',
            },
          },
          {
            type: 'select',
            prop: 'input4',
            attrs: {
              label: '损益货币',
              needStar: true,
            },
            options: [],
            rules: { required: true, message: '请选择' },
          },
          {
            type: 'select',
            prop: 'input5',
            attrs: {
              label: '记账货币',
              needStar: true,
            },
            options: [],
            rules: { required: true, message: '请选择' },
          },
          {
            type: 'select',
            prop: 'input6',
            attrs: {
              label: '本地货币',
              needStar: true,
            },
            options: [],
            rules: { required: true, message: '请选择' },
          },
        ];
        this.visibleAdd = true;
      } else if (this.num === 2) {
        // 业务机构
        this.formArr = [
          {
            type: 'input',
            prop: 'input1',
            attrs: {
              label: '编码',
              needStar: true,
            },
            rules: { required: true, message: '请输入文本' },
          },
          {
            type: 'input',
            prop: 'input2',
            attrs: {
              label: '短名',
              needStar: true,
            },
            rules: { required: true, message: '请输入文本' },
          },
          {
            type: 'input',
            prop: 'input3',
            attrs: {
              label: '名称',
            },
          },
          {
            type: 'select',
            prop: 'input4',
            attrs: {
              label: '类型',
              needStar: true,
            },
            options: [],
            rules: { required: true, message: '请选择' },
          },
          {
            type: 'selectTree',
            prop: 'input5',
            attrs: {
              label: '上级机构',
            },
            options: [],
          },
          {
            type: 'select',
            prop: 'input6',
            attrs: {
              label: '级别',
              needStar: true,
            },
            options: [],
            rules: { required: true, message: '请选择' },
          },
          {
            type: 'select',
            prop: 'input6',
            attrs: {
              label: '运营机构',
              needStar: true,
            },
            options: [],
            rules: { required: true, message: '请选择' },
          },
          {
            type: 'select',
            prop: 'input6',
            attrs: {
              label: '锁定',
              needStar: true,
            },
            options: [],
            rules: { required: true, message: '请选择' },
          },
        ];
        this.visibleAdd = true;
      } else {
        // 交易对手组
        this.formArr = [
          {
            type: 'input',
            prop: 'input1',
            attrs: {
              label: '编码',
              needStar: true,
            },
            rules: { required: true, message: '请输入文本' },
          },
          {
            type: 'input',
            prop: 'input3',
            attrs: {
              label: '名称',
            },
            rules: { required: true, message: '请输入名称' },
          },
          {
            type: 'select',
            prop: 'input6',
            attrs: {
              label: '运营机构',
              needStar: true,
              multiple: true,
            },
            options: [],
            rules: { required: true, message: '请选择' },
          },
        ];
        this.visibleAdd = true;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 612px;
  margin: 0 auto;
  .title {
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-content: center;
    .label {
      // font-weight: 550;
      font-size: var(--font-size-middle);
    }
    .search {
      color: #999;
    }
  }
  .list {
    padding: 12px;
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    min-height: 63px;
    background-color: #fff;
    font-size: var(--font-size-mini);
    .label {
      padding: 10px 5px 5px 17px;
      margin-top: 5px;
      margin-right: 10px;
      width: 140px;
      border-radius: 4px;
      background-color: #f9f9f9;
      line-height: 18px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      &:hover {
        background-color: var(--blue-10);
      }
    }
  }
}

.searchbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 0 12px 4px;
}

.formbox {
  padding: 0 50px;
}
</style>
