<template>
  <div style="box-sizing: border-box; padding: 20px;">
    <new-table :height="700" :title="title" :listData="list" :tableItems="tableItems" :shows="tableShows">
      <template #rowStatus="scope">
        <el-switch v-model="scope.row.rowStatus"  @change="handleSwitch($event, scope.row)"></el-switch>
      </template>
      <template #right>
        <el-button  size="mini" type="primary"  style="margin-right: 10px" @click="addFarm">添加牧场</el-button>
      </template>
      <template #handler="scope">
        <el-button type="primary" size="mini" style="margin-right: 10px" @click="edit(scope.row)" >编辑</el-button>
        <el-popconfirm
            title="是否删除这个牧场"
            @confirm="del(scope.row)"
        >
          <el-button size="mini" slot="reference"  type="danger">删除</el-button>
        </el-popconfirm>
      </template>
    </new-table>
    <el-dialog
        :title=" showType ? '编辑牧场' : '新增牧场'"
        :visible.sync="dialogVisible"
        width="30%">
      <div>
        <el-form :rules="rules" ref="ruleForm" size="mini" :model="form" label-width="80px">
          <el-form-item label="牧场名称" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="牧场地址" prop="url">
            <el-input v-model="form.url"></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 { getXFarmList , addXFarm, editXFarm, delXFarm } from "../../utils/api";
export default {
  name: "FarmOne",
  components: {
    NewTable
  },
  data() {
    return {
      title: '牧场大屏列表',
      list: [],
      tableItems: [
        {
          prop: 'id',
          label: '牧场ID',
          minWidth: '100',
          slotName: 'id'
        },
        {
          prop: 'name',
          label: '牧场名称',
          minWidth: '100',
          slotName: 'name'
        },
        {
          prop: 'url',
          label: '牧场大屏地址',
          minWidth: '100',
          slotName: 'url'
        },
        {
          label: '是否启用',
          minWidth: '100',
          slotName: 'rowStatus'
        },
        {
          label: '操作',
          minWidth: '100',
          slotName: 'handler'
        }
      ],
      tableShows: {
        showIndex: false,
        showSelect: false,
      },
      select: [],
      showType: false,
      form: {
        id: '',
        name: '',
        url: '',
        rowStatus: ''
      },
      dialogVisible: false,
      rules: {
        name: [{  required: true, message: '请输入牧场名称', trigger: 'blur' }],
        url: [{  required: true, message: '请输入牧场大屏地址', trigger: 'blur' }],
      },
    }
  },
  methods: {
    init() {
      getXFarmList({}).then(res => {
        if(res.code === 10000) {
          this.list = res.data;
        }
      })
    },
    addFarm() {
      this.dialogVisible = true;
      this.showType = false;
    },
    handleSwitch(val, data) {
      let params = {
        id: data.id,
        rowStatus: val
      }
      editXFarm(params).then(res => {
        if(res.code === 10000) {
          this.$message.success(res.message);
        } else {
          this.$message.error(res.message);
        }
      })

    },
    edit(row) {
      this.showType = true;
      this.dialogVisible = true;
      this.form.id = row.id;
      this.form.name = row.name;
      this.form.url = row.url;
    },
    del(row) {
      let params = {
        id: row.id
      }
      delXFarm(params).then(res => {
        if(res.code === 10000) {
          this.init();
          this.$message.success(res.message);
        } else {
          this.$message(res.message)
        }
      })
    },
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if(this.showType) {
            // 编辑
            let params = {
              id: this.form.id,
              name: this.form.name,
              url: this.form.url
            }
            editXFarm(params).then(res => {
              if(res.code === 10000) {
                this.init();
                this.$message.success(res.message);
              } else {
                this.$message(res.message)
              }
              this.reset();
            })

          } else {
            // 新增
            let params = {
              name: this.form.name,
              url: this.form.url
            }
            addXFarm(params).then(res => {
              if(res.code === 10000) {
                this.init();
                this.$message.success(res.message);
              } else {
                this.$message(res.message)
              }
              this.reset();
            })
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    reset() {
      this.showType = false;
      this.dialogVisible = false;
      this.form = {
        id: '',
        name: '',
        url: '',
        rowStatus: ''
      }
    }
  },
  mounted() {
    this.init()
  }
}
</script>

<style scoped>

</style>
