？<template>
  <layout-form>
    <el-dialog
      title="选择材料信息"
      :visible.sync="datumDialog.visible"
      width="80%"
    >
      <el-container>
        <el-aside width="250px">
          <el-tag
            style="margin-top: 10px"
            v-for="item in datumTags"
            :key="item.id"
            closable
            hit="true"
            @close="handleClose(item.id)"
          >
            {{ item.materialName }}
          </el-tag>
        </el-aside>
        <el-main>
          <!--搜索-->
          <div>
            <el-form :inline="true" size="mini">
              <el-form-item label="材料名称">
                <el-input
                  v-model="searchform.name"
                  placeholder="材料名称"
                ></el-input>
              </el-form-item>

              <el-form-item>
                <el-button plain @click="datumTableSearchConfirm"
                  >查询</el-button
                >
                <el-button plain @click="datumTableSearchClear">清空</el-button>
              </el-form-item>
            </el-form>
          </div>
          <!--材料列表-->
          <el-table
            size="mini"
            ref="multipleTable"
            :data="datumTableData"
            tooltip-effect="dark"
            border
            highlight-current-row
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column prop="materialName" label="材料名称" />
            <el-table-column width="300" prop="code" label="关联事项" />

            <el-table-column width="200" label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleAdd(scope.$index, scope.row)"
                  >加入</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->
          <div class="pagination-wapper" style="height: 100px">
            <el-pagination
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
              :current-page="datumTable.currPage"
              :page-size="datumTable.prePageResult"
              :page-sizes="[10, 20, 50, 100, 200]"
              layout="sizes, total, prev, pager, next, jumper"
              :total="datumTable.totalResult"
            >
            </el-pagination>
          </div>

          <div>
            <span slot="footer" class="dialog-footer">
              <el-button @click="datumDialog.visible = false">取 消</el-button>
              <el-button type="primary" @click="selectDatumConfirm"
                >确 定</el-button
              >
            </span>
          </div>
        </el-main>
      </el-container>
    </el-dialog>

    <el-form
      :model="form"
      :loading="loading"
      :rules="rules"
      size="small"
      style="width: 80%"
      label-width="120px"
      ref="form"
    >
      <el-row>
        <Field
          label="一件事标题"
          prop="tname"
          v-model="form.tname"
          placeholder="请输入一件事标题"
          :span="18"
        />

        <Field
          label="是否自主申报"
          prop="iszzsb"
          v-model="form.iszzsb"
          :enumData="dict.iszzsb"
          type="radio"
          placeholder="请输入是否自主申报 0否  1是 默认0"
        />

        <el-col :span="24">
          <el-form-item label="选择材料">
            <el-button type="primary" @click.prevent="selectDatum"
              >选择材料</el-button
            >
          </el-form-item>
        </el-col>

        <el-col :span="24">
          <el-table
            style="margin-left: 20px; margin-bottom: 20px"
            v-if="datumCurTableData.length > 0"
            size="mini"
            :data="datumCurTableData"
            border
            highlight-current-row
          >
            <el-table-column prop="materialName" label="材料名称" />
            <el-table-column prop="code" label="关联事项" />

            <el-table-column
              prop="isMust"
              :formatter="formatterDict"
              label="材料必要性"
            >
            </el-table-column>

            <el-table-column
              prop="materialType"
              :formatter="formatterDict"
              label="材料形式"
            >
            </el-table-column>

            <el-table-column
              prop="materialSourceSm"
              :formatter="formatterDict"
              label="材料来源"
            >
            </el-table-column>

            <el-table-column prop="paperNum" label="材料份数">
            </el-table-column>

            <el-table-column width="200" label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleDelete(scope.$index, scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>

      <form-buttons @submit="submitForm" />
    </el-form>
  </layout-form>
</template>

<script>
import form from "@/assets/mixins/form";
//import table from "@/assets/mixins/table";
export default {
  mixins: [ form],
  created() {
    const { id } = this.$route.query;
    if(!id) return
    let query = {
      "pageInfo.prePageResult": -1,
      "query.basicsId": id,
    };

    this.$post("/basics/datum/list", query).then(({ data }) => {
      const ids = data.result.map((item) => {
        return item.oneDatumIds;
      });

      console.log(ids);

      if(!ids||ids.length==0)return 

      query = {
        "pageInfo.prePageResult": -1,
        "query.idList": ids,
      };

      this.$post("/datum/list", query).then(({ data }) => {
        this.datumCurTableData = data.result;
        this.datumTags = data.result;
        //dialog页 数据
      });
    });
  },
  methods: {
    beforeRender(data) {
      data.entity.iszzsb = data.entity.iszzsb + "";
      return data;
    },
    // 渲染后置处理
    afterRender(data) {},
    //表单提交前
    beforeSubmit(data) {

      console.log("beforeSubmit data",data)


      let ids=this.datumCurTableData.map(i=>i.id);

      this.form.oneDatumIds=ids.join(",")

      this.form.valid=0;
      this.form.sort=0;

      return data
    },
    //弹窗物料列表搜索事件-查询
    datumTableSearchConfirm() {
      this.getMateriaTableData();
    },
    //弹窗物料列表搜索事件-清空
    datumTableSearchClear() {
      this.searchform = {};
      this.getMateriaTableData();
    },

    handleSizeChange(currSize) {
      console.log("currSize=" + currSize);
      this.datumTable.prePageResult = currSize;
      this.getDatumTableData();
    },
    handleCurrentChange(currPage) {
      console.log("currPage=" + currPage);
      this.datumTable.currPage = currPage;
      this.getDatumTableData();
    },

    //刷新选择材料弹窗 材料列表
    getMateriaTableData() {
      //初始花query:默认查询启用物料
      const query = {
        "pageInfo.currPage": this.datumTable.currPage,
        "pageInfo.prePageResult": this.datumTable.prePageResult,
      };

      //弹窗材料列表搜索条件name
      if (this.searchform.materialName) {
        query.materialName = this.searchform.materialName;
      }

      this.$post("/datum/list", query).then(({ data }) => {
        this.datumTableData = data.result;
        this.datumTable.currPage = data.pageInfo.currPage;
        this.datumTable.prePageResult = data.pageInfo.prePageResult;
        this.datumTable.totalResult = data.pageInfo.totalResult;
      });
    },

    handleSelectionChange(val) {
      this.multipleSelection = val;
    },

    selectDatum() {
      //清空物料选择弹窗搜索条件
      this.searchform = {};
      this.getMateriaTableData();
      this.datumDialog.visible = true;
    },

    selectDatumConfirm() {
      //清空物料选择弹窗搜索条件
      this.searchform = {};
      this.datumDialog.visible = false;
      this.datumCurTableData = this.datumTags;
    },

    handleDelete(index, row) {
      this.handleClose(row.id)
      let tmpArrs = [];
      for (let item of this.datumCurTableData) {
        if (item.id === row.id) {
          continue;
        }
        tmpArrs.push(item);
      }
      this.datumCurTableData = tmpArrs;
    },

    handleAdd(index, row) {
      this.datumTags.push(row);
      this.datumTags = this.unique(this.datumTags, "id");
    },

    handleClose(tag) {

     let tmpArrs = [];
      for (let item of this.datumTags) {
        if (item.id === tag) {
          continue;
        }
        tmpArrs.push(item);
      }
      this.datumTags = tmpArrs;
    },

    unique(arr, attr) {
      const res = new Map();
      return arr.filter((item) => {
        var attrItem = item[attr];
        return !res.has(attrItem) && res.set(attrItem, 1);
      });
    },

    formatterDict(row, column, val) {
      const key = column.property;

      if (this.dict && this.dict[key]) {
        const dict = this.dict[key];
        return dict[val] || val;
      }
      return val;
    },
  },

  data() {
    return {
      datumTags: [],
      datumCurTableData: [],
      datumTableData: [],
      searchform: { materialName: "" },
      datumTable: {
        totalResult: "",
        prePageResult: "",
        currPage: "",
      },
      datumDialog: {
        visible: false,
        innerVisible: false,
      },
      rules: {
        tname: [
          { max: 255, message: "最多只能录入255个字符", trigger: "blur" },
        ],
        qrcode: [
          { max: 128, message: "最多只能录入128个字符", trigger: "blur" },
        ],
        matterIds: [
          { max: 128, message: "最多只能录入128个字符", trigger: "blur" },
        ],
        updatetime: [
          { required: true, message: "请输入变更时间", trigger: "blur" },
        ],
        updateUser: [
          {
            required: true,
            message: "请输入变更用户loginName",
            trigger: "blur",
          },
          { max: 50, message: "最多只能录入50个字符", trigger: "blur" },
        ],
      },
    };
  },
};
</script>

<style lang="less">
.pagination-wapper {
  background: #fff;
  margin-top: 10px;
  .el-pagination {
    margin-left: auto;
  }
}
.el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>