<template>
  <el-main class="bg_white" style="min-height: calc( 100% - 80px )">
    <el-row class="title_box">
      <el-col :span="20">
        <div class="title">语言设置</div>
      </el-col>
      <el-col class="operate_box" :span="4">
        <el-button type="primary" @click="handleEdit('', 'add')">新增</el-button>
      </el-col>
    </el-row>
    <!---产品列表-->
    <div class="table">
      <el-table :data="data.list" border fit highlight-current-row>
        <el-table-column label="简称" prop="code" align="center" width="240"></el-table-column>
        <el-table-column label="对应语言" prop="name" align="center"></el-table-column>
        <el-table-column label="创建时间" prop="create_time" align="center"></el-table-column>
        <el-table-column fixed="right" width="300" label="操作" prop="" align="center">
          <template #default="scope">
            <el-button title="编辑" type="text" @click="handleEdit(scope.row, 'edit')" v-if="scope.row.id != 1">编辑
            </el-button>
            <!-- <el-button title="删除" type="text"   @click="handleDel(scope.row)">删除</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="m-b-20 m-t-20" :current-page="query_form.page" :page-sizes="[10, 20, 30]"
        :page-size="query_form.size" layout="total, sizes, prev, pager, next, jumper" :total="data.count"
        @size-change="handleSizeChange" @current-change="handleCurrentChange" small>
      </el-pagination>
      <!--新增/编辑-->
      <el-dialog class="edit_dialog" v-model="data.editModal" :title="data.modalTitle" :show-close="true" width="440px">
        <el-form ref="form" :model="data.form" label-position="left">
          <el-form-item label="简称code：" prop="code" label-width="100px">
            <el-input v-model="data.form.code" />
          </el-form-item>
          <el-form-item label="对应语言：" prop="name" label-width="100px">
            <el-input v-model="data.form.name" />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="text-r">
            <el-button type="primary" plain @click="closeEditDialog">取消</el-button>
            <el-button type="primary" @click="addClick">确认</el-button>
          </div>
        </template>
      </el-dialog>
      <!--删除提醒-->
      <el-dialog v-model="data.deleteModal" title="删除语言" :show-close="true" width="440px">
        <div class="del_text">确定删除已选择的语言吗？</div>
        <template #footer>
          <div class="text-r">
            <el-button type="primary" plain @click="closeDialog">取消</el-button>
            <el-button type="primary" @click="deleteClick">确认</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
    <!---产品列表-->
  </el-main>
</template>
<script>
import { reactive, onMounted, ref } from 'vue'
import Request from '@/utils/request.js'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
export default {
  name: 'Language',
  setup () {
    const data = reactive({
      deleteModal: false,
      editModal: false,
      modalTitle: '编辑语言',
      type: 'edit',
      row: {},
      count: 0,
      list: [],
      form: {
        code: '',
        name: ''
      }
    })
    const query_form = reactive({
      page: 1,
      size: 10
    })

    onMounted(() => {
      getList()
      console.log(store.state.user.language)
    })
    //实例化请求
    const request = new Request()
    let store = useStore()

    const getList = () => {
      request.get('v1/lang', query_form).then(res => {
        if (res.status == 200) {
          data.list = res.data.data
          data.count = res.data.count
        } else {
          ElMessage({
            type: 'error',
            message: res.message
          })
        }
      })
    }
    //分页
    const handleSizeChange = (size) => {
      query_form.size = size
      getList()
    }

    const handleCurrentChange = (page) => {
      query_form.page = page
      getList()
    }

    //清除表单数据
    const clearData = () => {
      data.form.code = ''
      data.form.name = ''
    }
    //新增/编辑
    const addClick = () => {
      if (data.type == 'add') {
        request.post('v1/lang', { code: data.form.code, name: data.form.name }).then(res => {
          if (res.status == 200) {
            data.editModal = false
            getList()
          } else {
            ElMessage({
              type: 'error',
              message: res.message
            })
          }
        })
      } else {
        request.put('v1/lang/' + data.row.id, { id: data.row.id, code: data.form.code, name: data.form.name }).then(res => {
          if (res.status == 200) {
            data.editModal = false
            getList()
          } else {
            ElMessage({
              type: 'error',
              message: res.message
            })
          }
        })
      }
    }
    //编辑
    const handleEdit = (row, type) => {
      data.type = type
      data.row = row
      clearData()
      if (type == 'edit') {
        data.editModal = true
        data.modalTitle = '编辑语言'
        request.get('v1/lang/' + row.id).then(res => {
          if (res.status == 200) {
            data.form.code = res.data.code
            data.form.name = res.data.name
          } else {
            ElMessage({
              type: 'error',
              message: res.message
            })
          }
        })
      } else {
        data.editModal = true
        data.modalTitle = '新增语言'
      }
    }
    //删除
    const handleDel = (row) => {
      data.row = row
      data.deleteModal = true
    }
    const deleteClick = () => {
      request.delete('v1/lang/' + data.row.id, { id: data.row.id }).then(res => {
        if (res.status == 200) {
          data.deleteModal = false
          getList()
        } else {
          ElMessage({
            type: 'error',
            message: res.message
          })
        }
      })
    }
    const closeDialog = () => {
      data.deleteModal = false
    }
    const closeEditDialog = () => {
      data.editModal = false
    }

    return {
      data,
      query_form,
      getList,
      handleSizeChange,
      handleCurrentChange,
      addClick,
      clearData,
      handleEdit,
      handleDel,
      deleteClick,
      closeDialog,
      closeEditDialog
    }
  }
}
</script>
<style scoped>
.del_text {
  font-size: 14px;
  font-weight: 400;
  line-height: 22px;
  color: #606266;
}
.operate_box {
  display: flex;
  flex-direction: row;
  justify-content: right;
}
</style>