<template>
  <!-- 新增主题包 -->
    <el-dialog
      :title="topicPacksDialog.title"
      :visible.sync="topicPacksDialog.visible"
      width="95%"
    >
      <el-row>
        <el-row>
          <el-form
            :model="topicPacksform"
            :label-width="formLabelWidth"
            :rules="topicPacksRules"
            ref="topicPacksform"
          >
            <el-row>
              <el-col :span="12">
                <el-form-item prop="classifyName" label="主题事项名称">
                  <el-input v-model="classifyform.classifyName"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="sortRemarks" label="主题事项说明">
                  <el-input v-model="classifyform.sortRemarks"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
           
            <el-row>
              <el-col :span="12">
                <el-form-item prop="deliveryPeriod" label="承诺办结时限">
                  <el-input
                    placeholder="请输入内容"
                    :disabled="topicPacksform.overWay == '1'"
                    v-model="topicPacksform.overTime"
                    class="input-with-select"
                  >
                    <el-select
                      v-model="topicPacksform.overWay"
                      slot="prepend"
                      placeholder="请选择"
                    >
                      <el-option label="即刻" value="1"></el-option>
                      <el-option label="工作日" value="2"></el-option>
                    </el-select>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item prop="deliveryPeriod" label="到现场次数">
                  <el-input v-model="topicPacksform.presenceNum"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-row>
        <el-divider></el-divider>

        <el-row>
          <!--搜索-->

          <div>
            <el-form :inline="true" size="mini">
              <el-form-item>
                <el-button plain @click="matterBatchAdd">批量添加</el-button>
              </el-form-item>

              <el-form-item style="float: right">
                <el-button plain @click="matterSearchConfirm">查询</el-button>
              </el-form-item>

              <el-form-item label="事项名称" style="float: right">
                <el-input
                  v-model="searchform.matterName"
                  placeholder="事项名称"
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
          <!--事项列表-->
          <el-table
            size="mini"
            ref="multipleTable"
            :data="matterPageInfoData"
            tooltip-effect="dark"
            border
            v-loading="loading"
            highlight-current-row
            @selection-change="handleSelectionChange"
          >
            <!-- <el-table-column type="selection" width="55"> </el-table-column> -->
            <el-table-column prop="matterName" label="事项名称"  :show-overflow-tooltip="true" />
            <el-table-column width="400" prop="datumn" label="关联材料">
              <template slot-scope="scope">
                <el-row
                  v-for="(item, index) in scope.row.datumList"
                  :key="index"
                >
                  <el-tag
                    style="
                      font-size: 12px;
                      white-space: pre-wrap;
                      margin-bottom: 5px;
                    "
                  >
                    {{ item.materialName | ellipsis2 }}
                  </el-tag>
                </el-row>
              </template>
            </el-table-column>

            <el-table-column width="100" label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleAdd(scope.$index, scope.row)"
                  >加入</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <!-- 分页器 -->

          <el-row type="flex" justify="end">
            <el-pagination
              @current-change="handleCurrentChange"
              @size-change="handleSizeChange"
              :current-page="matterPageInfo.currPage"
              :page-size="matterPageInfo.prePageResult"
              :page-sizes="[10, 20, 50, 100, 200]"
              layout="sizes, total, prev, pager, next, jumper"
              :total="matterPageInfo.totalResult"
            >
            </el-pagination>
          </el-row>

          <el-row
            style="margin-bottom: 10px"
            v-for="item in matterTags"
            :key="item.id"
          >
            <el-tag closable @close="handleClose(item.id)">
              {{ item.matterName | ellipsis }}
            </el-tag>
          </el-row>

          <el-row type="flex" justify="end">
            <el-button @click="topicPacksDialog.visible = false"
              >取 消</el-button
            >
            <el-button type="primary" @click="selectMatterConfirm"
              >确 定</el-button
            >
          </el-row>
        </el-row>
      </el-row>
    </el-dialog>
</template>
<script>
export default {
  name: "basicInfoForm",
 
  props: {
   
    info: {
      type: Object,
      default: null
    }
  },
   created() {


  },
  data() {
    return {
     
    };
  }
};
</script>
