<template>
  <div class="data-list" v-loading="loading">


      <el-table :data="dataList" style="width: 100%" header-row-class-name="headerBg" table-layout="auto" empty-text="没有原始数据信息">
        <el-table-column prop="id" label="ID" align="center" width="80"/>
        <el-table-column prop="code" label="编码" align="center" min-width="120"/>
        <el-table-column prop="name" label="名称" align="center" min-width="200"/>

        <el-table-column prop="category.name" label="所属分类" align="center" min-width="150">
          <template #default="scope">
            {{categoryName(scope.row.category_id)  }}
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center" min-width="150"/>
        <el-table-column prop="status" label="分类状态" align="center" min-width="180">
          <template #default="scope">
              <div v-if="scope.row.status==5">启用</div>
              <div v-if="scope.row.status==6">停用</div>
          </template>
        </el-table-column>
        <el-table-column label="操作" fixed="right" align="center" min-width="200">
          <template #default="scope">
            <div class="btns">
              <el-button type="primary" size="small"  @click="btnEdit(scope.row.id)"><svg-icon icon-class="edit"/>编辑</el-button><!-- v-if="scope.row.auth.edit" -->
              <el-button type="primary" size="small"   @click="btnView(scope.row.id)"><svg-icon icon-class="edit"/>预览</el-button><!-- v-if="scope.row.auth.view" -->
              <el-button type="danger" size="small"  @click="btnDelete(scope.row.id)"><svg-icon icon-class="delete"/>删除</el-button><!-- v-if="scope.row.auth.delete" -->
            </div>
          </template>
        </el-table-column>
      </el-table>


      <div class="page-info">
      	<el-pagination
      	:currentPage="queryForm.page"
      	:page-size="queryForm.pageSize"
      	:total="recordCount"
      	:page-count="pageTotal"
      	 background
      	 layout="prev, pager, next"
      	 @current-change="ChangePage"
      	 >
      	 </el-pagination>
      </div>

     <el-dialog  :visible.sync="dialogVisible" append-to-body v-el-drag-dialog  width="80%" custom-class="prod-verify" title="修改原始数据">
          <dataInfo :id="currentDataId" @onClose="onClose"></dataInfo>
      </el-dialog>

     <el-dialog  :visible.sync="dialogView" append-to-body v-el-drag-dialog  width="80%" custom-class="prod-verify" title="查看原始数据">
          <dataView :fileOjb="fileOjb" @onClose="onClose"></dataView>
      </el-dialog>



  </div>


</template>

<script>
  import{searchSourceData,deleteSourceData} from'@/api/sourceData';
  import {
  searchSourceDataCategory,
  createSourceData,
  updateSourceData,
  getSourceData,
} from "@/api/sourceData";
  import dataInfo from './dataInfo.vue';
  import dataView from './dataView.vue';
  import elDragDialog from '@/directive/el-drag-dialog'
  export default{
    components:{
      dataInfo,dataView
    },
    directives: { elDragDialog },
    props:{
      queryForm:{
        type:Object,
        default:()=>{
          return {
             page:1,
             pageSize:10,
             code:'',
             name:'',
             status:''
          }
        }
      },
      allowEdit:{
        type:Boolean,
        default:false,
      },
      allowDelete:{
        type:Boolean,
        default:false,
      },


    },
    watch:{

        'queryForm': {
          handler: function(val) {
            this.search();
          },
          immediate: true,//立即执行
          deep: true

        },
    },
    data(){
      return{
        dialogVisible:false,//控制产品审核
        dialogView:false,
        currentDataId:0,
        fileOjb:null,
        recordCount:0,
        pageTotal:1,
        dataList:[],
        currentData:{},
        loading: false, // Add loading state
        categoryList:[]
      }
    },
    mounted() {
      this.search();
      this.authority()
      this.initCategory()
    },
    methods:{
      /* 获取分类名称 */
      categoryName(e){
        return this.categoryList.find(el => el.id === e)?.name;
      },
      initCategory() {
      let _this = this;
      searchSourceDataCategory({ page: 1, pageSize: 9999 }).then(
        (res) => {
          if (res.status != 200) return;
          _this.categoryList = res.data.sourcecategories.map((res) => {
            return {
              id: res.id,
              value: res.id,
              name: res.name,
            };
          });
        }
      );
    },
      authority(){
        console.log(this.$store.state.user.roleInfo.id);
      },
      editWidth(row){
        if(this.allowDelete && this.allowEdit){
          return 200;
        }
        if(this.allowDelete||this.allowEdit){
          return 120;
        }
        return 100;
      },


      btnDelete(e){
        let _this=this;
        let par={
          id:e,
        }
        _this.$confirm("您是否确认删除该记录？","提示",{
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning',
        }).then((res)=>{
          // console.log("AAA")
             deleteSourceData(par).then(res=>{
               _this.search();
             })
        }).catch(()=>{
        })
      },


      searchData(){
        let _this=this;
        _this.dialogVisible=false;
        _this.search();
      },

      btnView(e){
        let _this=this;
        _this.$router.push({path:'/knowledge/dataCenter/info',query:{id:e}})
      },
      btnCloseView(e){
        this.currentDataId=0;
        this.dialogView=false;
      },

      //编辑
      btnEdit(e){
        let _this=this;
        _this.$router.push({path:'/knowledge/dataCenter/create',query:{id:e}})
      },

      onClose(){
        let _this=this;
        _this.currentDataId=0;
        _this.dialogVisible=false;
        _this.search();
      },

      //搜索
      search(){
        let _this=this;
        _this.loading = true; // Start loading
        searchSourceData(_this.queryForm).then(res=>{
          if(!res)return;
          _this.dataList=res.data.dataList;
          _this.recordCount=res.data.totalRecord;
          _this.pageTotal=res.data.totalPage;
        }).finally(() => {
          _this.loading = false; // Stop loading
        });
      },
      //修改分页
      ChangePage(e){
      	let _this=this;
      	_this.queryForm.page=e;
      	_this.search();
      },
    }
  }
</script>

<style lang="scss">
@import './dataList.scss';
</style>
