<template>
  <div class="app-container">
    <!--工具栏-->
    <div class="head-container">
      <div v-if="crud.props.searchToggle">
        <!-- 搜索 -->
        <el-input
          v-model="query.name"
          size="mini"
          clearable
          placeholder="输入表格名称搜索"
          style="width: 200px;"
          class="filter-item"
          @keyup.enter.native="crud.toQuery"
        />
        <rrOperation />
      </div>
      <crudOperation :permission="permission">
        <el-button
          slot="right"
          class="filter-item"
          type="primary"
          icon="el-icon-circle-plus-outline"
          size="mini"
          :disabled="crud.selections.length !== 1"
          @click="toAdd(crud.selections[0])"
        >
          添加字段
        </el-button>
      </crudOperation>
    </div>
    <!-- 表单渲染 -->
    <el-table
      ref="table"
      v-loading="crud.loading"
      :data="crud.data"
      size="mini"
      style="width: 100%;"
      @selection-change="crud.selectionChangeHandler"
    >
      <el-table-column type="selection" width="55" />
      <el-table-column v-if="false" prop="id" label="id" />
      <el-table-column prop="code" label="编码" />
      <el-table-column prop="name" label="名称" />
      <el-table-column prop="remark" label="备注" />
      <el-table-column prop="is_active" label="启用" width="75px">
        <template slot-scope="scope">
          <span v-if="scope.row.is_active==0">否</span>
          <span v-else>是</span>
        </template>
      </el-table-column>
      <el-table-column prop="create_name" label="创建者" />
      <el-table-column v-permission="['admin','grid:edit','grid:del']" label="操作" width="150px" align="center">
        <template slot-scope="scope">
          <udOperation
            :data="scope.row"
            :permission="permission"
          />
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <pagination />
    <!--增改表单-->
    <el-dialog
      :close-on-click-modal="false"
      :before-close="crud.cancelCU"
      :visible.sync="crud.status.cu > 0"
      :title="crud.status.title"
      width="500px"
    >
      <el-form ref="form" :model="form" :rules="rules" size="mini" label-width="80px">
        <el-form-item label="编码" prop="code">
          <el-input v-model="form.code" style="width: 370px;" />
        </el-form-item>
        <el-form-item label="名字" prop="name">
          <el-input v-model="form.name" style="width: 370px;" />
        </el-form-item>
        <el-form-item label="启用" prop="is_active">
          <el-radio-group v-model="form.is_active" size="mini">
            <el-radio-button label="1">是</el-radio-button>
            <el-radio-button label="0">否</el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="备注" prop="description">
          <el-input v-model="form.remark" style="width: 380px;" rows="5" type="textarea" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="crud.cancelCU">取消</el-button>
        <el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
      </div>
    </el-dialog>
    <!--添加字段-->
    <el-dialog
      :close-on-click-modal="false"
      :visible.sync="addFieldVisible"
      title="添加字段"
      fullscreen
      width="500px"
    >
      <div style="text-align: right; padding: 0 0 10px 0">
        <el-button type="primary" @click="addItem">添加一行</el-button>
      </div>
      <el-form ref="gridFieldFrom" :model="gridFieldFrom">
        <el-table
          :header-cell-style="{'text-align':'center'}"
          class="mt-10"
          :data="gridFieldFrom.gridFieldData"
          stripe
          border
        >
          <el-table-column type="index" label="序号" min-width="50" />
          <el-table-column label="编码" prop="code" min-width="120">
            <template slot-scope="scope">
              <el-form-item
                :prop="'gridFieldData.'+ scope.$index + '.code'"
                :rules="[
                  { required: true, message: '编码不能为空!', trigger: 'blur' }
                ]"
              >
                <el-input v-model="scope.row.code" style="text-align: center" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="字段名字" prop="name" min-width="120" align="right">
            <template slot-scope="scope">
              <el-input v-model="scope.row.name" />
            </template>
          </el-table-column>
          <el-table-column label="宽度" prop="width" min-width="60">
            <template slot-scope="scope">
              <el-form-item
                :prop="'gridFieldData.'+ scope.$index + '.width'"
                :rules="[
                  { required: true, message: '宽度不能为空!', trigger: 'blur' }
                ]"
              >
                <el-input-number v-model="scope.row.width" style="width: 100%" controls-position="right" :min="60" :step="5" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="对齐方式" prop="align" min-width="60">
            <template slot-scope="scope">
              <el-select v-model="scope.row.align" placeholder="请选择">
                <el-option
                  v-for="item in alignOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="格式列" prop="format" min-width="60">
            <template slot-scope="scope">
              <el-form-item
                :prop="'gridFieldData.'+ scope.$index + '.format'"
                :rules="[
                  { required: true, message: '格式列不能为空!', trigger: 'blur' }
                ]"
              >
                <el-input v-model="scope.row.format" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="排序号" prop="" min-width="60">
            <template slot-scope="scope">
              <el-form-item
                :prop="'gridFieldData.'+ scope.$index + '.sort_num'"
                :rules="[
                  { required: true, message: '排序号不能为空!', trigger: 'blur' }
                ]"
              >
                <el-input-number v-model="scope.row.sort_num" style="width: 100%" controls-position="right" :min="1" :step="5" />
              </el-form-item>
            </template>
          </el-table-column>
          <el-table-column label="隐藏" prop="is_hidden" min-width="60" align="center">
            <template slot-scope="scope">
              <el-radio-group v-model="scope.row.is_hidden" size="mini">
                <el-radio-button label="1">是</el-radio-button>
                <el-radio-button label="0">否</el-radio-button>
              </el-radio-group>
            </template>
          </el-table-column>
          <el-table-column label="操作" min-width="30" align="center">
            <template slot-scope="scope">
              <el-button size="mini" type="danger" icon="el-icon-minus" circle @click="deleteField(scope.$index)" />
            </template>
          </el-table-column>
        </el-table>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="text" @click="addFieldVisible = false">取消</el-button>
        <el-button :loading="crud.cu === 2" type="primary" @click="commitData('gridFieldFrom')">确认</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import CRUD, { crud, form, header, presenter } from '@crud/crud'
import rrOperation from '@crud/RR.operation'
import crudOperation from '@crud/CRUD.operation'
import udOperation from '@crud/UD.operation'
import pagination from '@crud/Pagination'
import crudTables from '@/api/system/grid'
import crudGridFields from '@/api/system/gridField'
const defaultForm = {
  id: null,
  code: null,
  name: null,
  remark: null,
  create_name: null,
  create_time: null,
  update_optname: null,
  update_time: null
}
export default {
  name: 'Grid',
  components: { rrOperation, crudOperation, udOperation, pagination },
  cruds() {
    return CRUD({
      title: '表格',
      url: 'api/grid',
      sort: 'update_time,asc',
      crudMethod: {
        ...crudTables
      },
      optShow: {
        add: true,
        edit: true,
        del: true
      }
    })
  },
  mixins: [presenter(), header(), form(defaultForm), crud()],
  data() {
    return {
      permission: {
        add: ['admin', 'grid:add'],
        edit: ['admin', 'grid:edit'],
        del: ['admin', 'grid:del']
      },
      rules: {
        code: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        name: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        value: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ],
        create_time: [
          { required: true, message: '不能为空', trigger: 'blur' }
        ]
      },
      addFieldVisible: false,
      gridFieldFrom: {
        grid_id: null,
        gridFieldData: [
          {
            id: null,
            code: null,
            name: null,
            width: 370,
            align: null,
            format: null,
            sort_num: null,
            remark: null,
            is_hidden: 0,
            create_name: null,
            create_time: null,
            update_optname: null,
            update_time: null,
            grid_id: null
          }
        ]
      },
      alignOptions: [{
        value: 'center',
        label: '居中'
      }, {
        value: 'left',
        label: '左对齐'
      }, {
        value: 'right',
        label: '右对齐'
      }]
    }
  },
  methods: {
    initGridFieldFrom() {
      this.gridFieldFrom = {
        grid_id: null,
        gridFieldData: [
          {
            id: null,
            code: null,
            name: null,
            width: 370,
            align: null,
            format: null,
            sort_num: null,
            remark: null,
            is_hidden: 0,
            create_name: null,
            create_time: null,
            update_optname: null,
            update_time: null,
            grid_id: null
          }
        ]
      }
    },
    toAdd(val) {
      // 初始化
      this.initGridFieldFrom()
      this.gridFieldFrom.grid_id = val.id
      // 先获取数据在打开
      // 根据grid_id获取数据
      crudGridFields.getGridFieldsById(val.id).then(res => {
        // console.log(res)
        if (res.length !== 0) {
          this.gridFieldFrom.gridFieldData = res
        }
      })
      // console.log(val.id)
      this.addFieldVisible = true
    },
    addItem() {
      this.gridFieldFrom.gridFieldData.push(
        {
          id: null,
          code: null,
          name: null,
          width: 370,
          align: null,
          format: null,
          sort_num: null,
          remark: null,
          is_hidden: 0,
          create_name: null,
          create_time: null,
          update_optname: null,
          update_time: null,
          grid_id: null
        }
      )
    },
    commitData(gridFieldFrom) {
      this.$refs[gridFieldFrom].validate((valid) => {
        if (valid) {
          // 提交保存
          crudGridFields.batchAdd(this.gridFieldFrom).then(res => {
            this.$notify({
              title: '成功',
              message: '数据添加成功',
              type: 'success'
            })
          }).finally(() => {
            this.addFieldVisible = false
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    deleteField(index) { // 添加字段的时候删除一条数据
      console.log(index)
      if (this.gridFieldFrom.gridFieldData.length > 1) {
        this.gridFieldFrom.gridFieldData.splice(index, 1)
      }
      console.log(this.gridFieldFrom.gridFieldData)
    }
  }
}
</script>

<style scoped>
.el-form-item--mini.el-form-item {
  margin: 5px !important;
}
</style>
