<template>
  <div class="sandList-container">
    <div class="main-top">
      <el-button type="primary" @click="addAuthorHandle">添加作者</el-button>
      <div>
        <el-input
          v-model="search_txt"
          style="width: 250px; margin-right: 20px"
          placeholder="作者名称"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
      </div>
    </div>
    <div class="main-bottom">
      <ul class="tab-ul">
        <li :class="['tab-li',default_tab===tab.key && 'act']" v-for="tab in panelTabs" :key="tab.key" @click="default_tab=tab.key">{{tab.name}}</li>
      </ul>
      <el-table
        :data="tableData"
        style="box-shadow: 0px 3px 6px rgba(155, 170, 219, 0.2)"
        row-key="VersionCode"
        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        :load="loadChildList"
        @sort-change="sortChangeHandle"
        element-loading-text="加载中..."
        v-loading="tableLoading"
        lazy
        border
        max-height="600"
        ref="table"
      >
        <el-table-column
          v-for="item in tableColums"
          :key="item.label"
          :label="item.label"
          :prop="item.key"
          :width="item.widthsty"
          :min-width="item.minwidthsty"
          :sortable="item.sortable"
          align="center"
        >
          <template slot-scope="{row}">
            <span v-if="item.key==='Enable'" :style="!row.Enable?'color: #f00':''">{{row.Enable?'启用':'禁用'}}</span>
            <span v-else>{{ row[item.key] }}</span>
          </template>
        </el-table-column>
        <el-table-column width="260" align="center" label="操作">
          <template slot-scope="{row}">
            <span class="editsty" @click="itemHandle(row, 'edit')" style="margin-right: 10px">编辑</span>
            <span class="deletesty" @click="itemHandle(row, 'del')" style="margin-right: 10px">删除</span>
            <span class="editsty" @click="itemHandle(row, 'set')">{{row.Enable?'禁用':'启用'}}</span>
          </template>
        </el-table-column>

        <div slot="empty" style="padding: 50px 0 50px">
          <img
            src="~@/assets/img/data_m/table_no.png"
            alt=""
            style="display: block;width: 135px;height: 90px;margin: 20px auto 10px;"
          />
          <span>暂无数据</span>
        </div>
      </el-table>
      <el-row style="margin-top: 30px">
        <m-page
          :page_no="page_no"
          :pageSize="pageSize"
          :total="total"
          @handleCurrentChange="handleCurrentChange"
        />
      </el-row>
    </div>

    <!-- 作者编辑弹窗 -->
    <m-dialog
      :show.sync="authorDialog"
      width="700px"
      :title="authorForm.title"
      @close="closeDialog"
    >
      <div style="padding-left: 60px;">
        <el-form 
          :model="authorForm"
          ref="formRef" 
          label-position="left"
          hide-required-asterisk
          label-width="80px">
          <el-form-item label="作者名称" prop="name" :rules="[{ required: true, message: '请输入作者名称', trigger: 'blur' }]">
            <el-input 
              type="text" 
              v-model="authorForm.name" 
              placeholder="请输入"
              style="width:400px;"
            />
          </el-form-item>
          <el-form-item label="研报类型" v-if="!authorForm.id">
            <el-select 
              v-model="authorForm.report_type"
              placeholder="请选择研报类型"
              style="width:400px;"
            >
              <el-option v-for="item in reportTypes" :key="item.key" :label="item.label" :value="item.key"/>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <div slot="footer" style="margin-top: 20px;">
        <el-button @click="closeDialog">取消</el-button>
        <el-button @click="saveAuthorHandle" type="primary">保存</el-button>
      </div>
    </m-dialog>
  </div>
</template>

<script>
import * as reportAuthorInterface from '@/api/modules/reportAuthorApi.js';
import mPage from '@/components/mPage';
import mDialog from '@/components/mDialog';
export default {
  name: '',
  components: { mPage, mDialog },
  data() {
    return {
      search_txt: '',
      tableLoading: false,
      default_tab: 1,
      panelTabs: [
        { name: '中文研报',key: 1 },
        { name: '英文研报',key: 2 },
      ],
      tableData: [],
      tableColums: [
        {
          label: '作者名称',
          key: 'ReportAuthor',
          minwidthsty: '100px',
        },
        {
          label: '添加时间',
          key: 'CreateTime',
          minwidthsty: '120px',
        },
        {
          label: '状态',
          key: 'Enable',
          widthsty: '120px',
        },
      ],
      page_no: 1,
      pageSize: 10,
      total: 0,

      authorDialog: false,
      authorForm: {
        title: '添加作者',
        name: '',
        report_type: 1
      },
      reportTypes: [
        { key: 1, label: '中文' },
        { key: 2, label: '英文' },
        ]
    };
  },
  watch: {
    search_txt() {
      this.page_no = 1;
      this.getTableData();
    },
    default_tab() {
      this.page_no = 1;
      this.getTableData();
    }
  },
  methods: {
    /* 获取表格数据 */
    getTableData() {
      this.tableLoading = true;

      reportAuthorInterface
        .authorList({
          PageSize: this.pageSize,
          CurrentIndex: this.page_no,
          Keyword: this.search_txt,
          AuthorType: this.default_tab
        })
        .then((res) => {
          this.tableLoading = false;
          if (res.Ret !== 200) return;
          
          const { List,Paging } = res.Data;
          List && List.forEach(_ => { _.CreateTime = this.$moment(_.CreateTime).format('YYYY-MM-DD HH:mm:ss') })
          this.tableData = List || [];
          this.total = Paging.Totals;
        });
    },

    /* 添加作者 */
    addAuthorHandle() {
      this.authorForm = {
        title: '添加作者',
        name: '',
        report_type: 1
      }
      this.authorDialog = true;
    }, 

    itemHandle(item,key) {
      const handleMap = {
        'edit': this.editHandle,
        'del': this.delHandle,
        'set': this.setAuthorHandle
      }

      handleMap[key](item)
    },

    editHandle({ReportAuthor,Id}) {
      this.authorForm = {
        title: '编辑作者',
        name: ReportAuthor,
        id: Id
      }
      this.authorDialog = true;
    },

    delHandle({Id}) {
      this.$confirm("删除不可恢复，确认删除该作者名称吗?", "提示", {
        type: "warning"
      }).then(() => {
        reportAuthorInterface.authorDel({Id}).then(res => {
          if(res.Ret!==200) return
          this.$message.success(res.Msg)
          
          this.getTableData();
        })
      }).catch(()=>{})
    },

    setAuthorHandle(item) {
      reportAuthorInterface.authorSet({
        Id: item.Id,
        EnableType: item.Enable ? 0 : 1
      }).then(res => {
        if(res.Ret!==200) return
        this.$message.success(res.Msg)
        
        item.Enable = item.Enable ? 0 : 1;
      })
    },

    /* 保存 */
    async saveAuthorHandle() {
      await this.$refs.formRef.validate()
      const { id,name,report_type } = this.authorForm;
      const { Ret,Msg } = this.authorForm.id 
        ? await reportAuthorInterface.authorEdit({ Id:id,Author:name })
        : await reportAuthorInterface.authorAdd({ AuthorType:report_type,Author:name })

      if(Ret !== 200) return
      this.$message.success(Msg)
      this.closeDialog()
      
      this.page_no = 1;
      this.getTableData();
    },

    closeDialog() {
      this.$refs.formRef.resetFields();
      this.authorDialog = false;
    },

    handleCurrentChange(page) {
      this.page_no = page;
      this.getTableData();
    }

    
  },
  mounted() {
    this.getTableData();
  },
};
</script>
<style lang="scss">
.sandList-container {
  .main-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 28px;
    padding: 20px 30px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 4px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.05);
  }
  .main-bottom {
    padding: 20px 30px;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 4px;
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.05);
    .tab-ul {
      display: flex;
      align-items: center;
      font-size: 16px;
      margin-bottom: 20px;
      .tab-li {
        border-bottom: 2px solid transparent;
        margin-right: 30px;
        cursor: pointer;
        &.act {
          color: #409EFF;
          border-color: #409EFF;
        }
      }
    }
  }

  .history-version-wrapper {
    padding: 0 20px;
  }
}
</style>
