<template>
  <div>
    <new-table :height="600" :title="title" :listData="farmList" :tableItems="tableItems" :shows="tableShows" @selectionChange="selectionChange">
      <template #right>
        <el-button  size="mini" type="primary" v-if="hasPerm('farmAdmin:add')" style="margin-right: 10px" @click="hold">同步牧场</el-button>
        <el-button size="mini" type="danger" v-if="hasPerm('farmAdmin:del')" style="margin-right: 10px" @click="delAll">批量删除</el-button>
      </template>
      <template #handler="scope">
        <el-button type="primary" size="mini" style="margin-right: 10px" @click="edit(scope.row)" v-if="hasPerm('farmAdmin:edit')">编辑</el-button>
        <el-popconfirm
            title="是否删除这个牧场"
            @confirm="del(scope.row)"
        >
          <el-button size="mini" slot="reference" v-if="hasPerm('farmAdmin:del')" type="danger">删除</el-button>
        </el-popconfirm>
      </template>
    </new-table>
    <el-dialog
        title="编辑牧场"
        :visible.sync="dialogVisible"
        width="30%">
      <div>
        <el-form ref="ruleForm" size="mini" :model="form" label-width="80px">
          <el-form-item label="牧场名称">
            <el-input v-model="form.farmName" readonly></el-input>
          </el-form-item>
          <el-form-item label="erpFarmName" >
            <el-input v-model="form.erpFarmName"></el-input>
          </el-form-item>
          <el-form-item label="erpShortName" >
            <el-input v-model="form.erpShortName"></el-input>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
          <el-button @click="reset">取 消</el-button>
          <el-button type="primary" @click="onSubmit('ruleForm')">确 定</el-button>
         </span>
    </el-dialog>
  </div>
</template>

<script>
import NewTable from "@/components/newTable/NewTable";
import {getErpFarm, getErpHold, delErpFarm, editEarpFarm} from "../../utils/api";

export default {
  name: "ErpFarm",
  components: {
    NewTable
  },
  data() {
    return {
      dialogVisible: false,
      current: 1,
      size: 20,
      strchStr: '',
      title: '牧场列表',
      farmList: [],
      tableItems: [
        {
          prop: 'farmName',
          label: '牧场名称',
          minWidth: '100',
          slotName: 'farmName'
        },
        {
          prop: 'erpFarmName',
          label: 'erpFarmName',
          minWidth: '100',
          slotName: 'erpFarmName'
        },
        {
          prop: 'erpShortName',
          label: 'erpShortName',
          minWidth: '100',
          slotName: 'erpShortName'
        },
        {
          label: '操作',
          minWidth: '100',
          slotName: 'handler'
        }
      ],
      tableShows: {
        showIndex: true,
        showSelect: true,
      },
      form: {
        erpFarmName: '',
        erpShortName: '',
      },
      selectList: [],
    }
  },
  methods: {
    init() {
      let params = {
        current: this.current,
        size: this.size,
        strchStr: this.strchStr
      }
      getErpFarm(params).then(res => {
        if(res.code === 10000) {
          this.farmList = res.data.records;
        }
      })
    },
    // 同步
    hold() {
      getErpHold().then(res => {
        if(res.code === 10000) {
          this.$message.success(res.message);
          this.init()
        } else {
          this.$message.error(res.message);
        }
      })
    },
    delAll() {
      if(this.selectList.length > 0) {
        let arr = [];
        this.selectList.forEach(item => {
          arr.push(item.id);
        })
        let params = {
          ids: arr.join(',')
        }
        let that = this;
        this.$confirm('此操作将永久删除该牧场, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delErpFarm(params).then(res => {
           if(res.code === 10000) {
             that.selectList = [];
             that.init()
             that.$message.success(res.message)
           } else {
             that.$message.error(res.message)
           }
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });

      } else {
        this.$message.error('请选择要删除的数据！')
      }
    },
    edit(data) {
      this.dialogVisible = true;
      this.form.erpFarmName = data.erpFarmName;
      this.form.erpShortName = data.erpShortName;
      this.form.farmName = data.farmName;
      this.form.id = data.id;
    },
    del(data) {
      let params = {
        ids: data.id
      }
      delErpFarm(params).then(res => {
        if(res.code === 10000) {
          this.init()
          this.$message.success(res.message)
        } else {
          this.$message.error(res.message)
        }
      })
    },
    selectionChange(data) {
      this.selectList = data;
    },
    onSubmit() {
      editEarpFarm(this.form).then(res => {
        if(res.code === 10000) {
          this.init()
          this.$message.success(res.message);
        } else {
          this.$message.error(res.message);
        }
        this.reset()
      })
    },
    reset() {
      this.dialogVisible = false;
      this.form = {
        erpFarmName: '',
        erpShortName: '',
      }
    }
  },
  mounted() {
    this.init();
  }
}
</script>

<style scoped>

</style>
