<template>
  <div class="com-formual">
        <el-form :inline="true" :model="queryForm" class="demo-form-inline">
            <el-form-item label="公式名称:">
              <el-input v-model="queryForm.name" placeholder="请填写公式名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onBtnSearch">  <svg-icon icon-class="search"/> 搜索</el-button>
              <el-button type="primary" @click="onBtnCreate">  <svg-icon icon-class="plus"/> 新增公式</el-button>
            </el-form-item>
          </el-form>

          <el-table :data="dataList" style="width: 100%" header-row-class-name="headerBg" empty-text="没有公式信息">
            <el-table-column prop="id" label="ID" align="center" width="80"/>
            <el-table-column prop="name" label="名称" align="left" width="180"/>
            <el-table-column prop="intro" label="介绍" align="center" width="150"/>
            <el-table-column prop="formula" label="内容" align="center" min-width="150"/>
            <el-table-column label="操作" align="center" width="350">
              <template #default="scope">
                <div class="btns">
                  <el-button type="primary" size="mini" @click="btnPicked(scope.row)"><svg-icon icon-class="confirm"/>使用</el-button>
                  <el-button type="primary" size="mini" @click="btnOnEdit(scope.row.id)"><svg-icon icon-class="edit"/>编辑</el-button>
                  <el-button type="danger" size="mini"><svg-icon icon-class="delete"/>删除</el-button>
                </div>
              </template>
            </el-table-column>
          </el-table>



          <div class="page-info">
          	<el-pagination
          	v-model: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 :close-on-click-modal="false"  width="300" custom-class="prod-verify" :title="title">
        <dataInfo :id="dataId" @onClose="onClose" :list="comList"></dataInfo>
    </el-dialog>


  </div>
</template>

<script>
  import{searchFormula} from'@/api/formula';
  import dataInfo from "./dataInfo";
  import elDragDialog from '@/directive/el-drag-dialog'


  export default{
    name:"Formula",
    emits:['onPicked'],
    directives: { elDragDialog },
    components:{
      dataInfo,
    },
    props:{
      comList:{
        type:Array,
        default:[]
      }
    },
    data(){
      return{
          dataId:0,
          dialogVisible:false,
          title:"创建公式",
          queryForm:{
            page:1,
            pageSize:10,
            name:'',
          },
          recordCount:0,
          pageTotal:1,
          dataList:[],
      }
    },
    mounted(){
      this.onBtnSearch();
    },
    methods:{

      onBtnCreate(e){
        let _this=this;
        _this.title="创建公式";
        _this.dataId=0;
        _this.dialogVisible=true;
      },

      btnOnEdit(id){
        this.title="编辑公式";
        this.dataId=id;
        this.dialogVisible=true;
      },

      onClose(e){
        let _this=this;
        _this.dialogVisible=false;
        _this.onBtnSearch();
      },
      onBtnSearch(e){
        let _this=this;
        _this.queryForm.page=1;
        _this.search();
      },
      btnPicked(e){
        this.$emit("onPicked",e);
      },
     //搜索
     search(){
       let _this=this;
       searchFormula(_this.queryForm).then(res=>{
         if(res.status!=200)return;
         _this.dataList=res.data.dataList;
         _this.recordCount=res.data.recordCount;
         _this.pageTotal=res.data.pageTotal;
       })
     },
     //修改分页
     ChangePage(e){
     	let _this=this;
     	_this.queryForm.page=e;
     	_this.search();
     },
    }
  }
</script>

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