<template>
  <div style="padding: 0 20px">
    <div ref="lxHeader">
      <lx-header icon="md-apps" text="政策管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
        <div slot="content"></div>
        <slot>
          <div>
            <Input style="width: 200px; margin-right: 10px" placeholder="关键字搜索" />
            <Button type="primary">查询</Button>
            <Button type="primary" style="margin-left: 10px" @click="$refs['addPolicy'].type = 'add',$refs['addPolicy'].isShow = true">新增</Button>
          </div>
        </slot>
      </lx-header>
    </div>

    <xy-table
      :total="total"
      @pageSizeChange="e => select.pageSize = e"
      @pageIndexChange="pageChange"
      :list="list"
      :table-item="table"
      @editor="editor"
      @delete="deletePolicy"></xy-table>

    <addPolicy ref="addPolicy" @refresh="getPolicies"></addPolicy>
  </div>
</template>

<script>
import {index,destroy} from "@/api/policy"
import {deepCopy} from "@/utils"
import { Message } from 'element-ui'

import addPolicy from "./components/addPolicy"
export default {
  components:{
    addPolicy
  },
  data() {
    return {
      select:{
        page:1,
        pageSize:10,
      },

      total:0,
      list:[],
      table:[
        {
          prop:"name",
          label:"名称",
          minWidth: 260,
          align:'left'
        },
        {
          prop:"items_count",
          label:"政策内容",
          width: 200
        },
        {
          label:"是否全局默认",
          width:200,
          customFn:(row)=>{
            if(row.default){
              return (<div style={{'color':'green'}}>是</div>)
            }else{
              return (<div style={{'color':'red'}}>否</div>)
            }
          }
        },
        {
          label:"绑定产品数",
          width: 200,
          formatter:(row)=>{
            return row.items.length
          }
        }
      ]
    }
  },
  methods: {

    async getPolicies(){
      const res = await index({
        page:this.select.page,
        rows:this.select.pageSize
      })
      console.log(res)
      this.list = res.data
      this.total = res.total
    },

    pageChange(e){
      this.select.page = e
      this.getPolicies()
    },

    editor(row){
      this.$refs['addPolicy'].detail = deepCopy(row)
      this.$refs['addPolicy'].type = 'editor'
      this.$refs['addPolicy'].id = row.id
      this.$refs['addPolicy'].isShow = true
    },
    deletePolicy(row){
      destroy({
        id:row.id
      }).then(res => {
        Message({
          type:'success',
          message:'删除政策成功'
        })
        this.getPolicies()
      })
    }
  },
  mounted() {
    this.getPolicies()
  }

}
</script>

<style scoped lang="scss">
</style>
