<template>
  <el-main class="bg_white" style="min-height: calc( 100% - 80px )">
    <!--顶部搜索-->
    <CommonSeach v-model:diySerach="data.diySerach" @getSeachData="getSeachData"></CommonSeach>
    <!--搜索-->
    <el-row class="title_box">
      <el-col :span="24">
        <el-button type="primary" @click="handleEdit('', 'add')">新增OPD团队</el-button>
      </el-col>
    </el-row>
    <!---产品列表-->
    <div class="table">
      <el-table :data="data.list" border style="width: 70%">
        <el-table-column align="center" prop="id" label="ID"></el-table-column>
        <el-table-column label="OPD团队名称" prop="name" align="center"></el-table-column>
        <el-table-column label="状态" align="center">
          <template #default="scope">
            <el-switch v-model="scope.row.status" class="ml-2" :active-value=1 :inactive-value=0
              @change="changeStatus(scope.row)" />
          </template>
        </el-table-column>
        <el-table-column label="操作" prop="" align="center">
          <template #default="scope">
            <el-button title="编辑" type="text" @click="handleEdit(scope.row, 'edit')">编辑</el-button>
            <el-button title="删除" type="text" @click="handleDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination class="m-t-20 m-b-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 v-model="data.editCate" :title="data.dialogTit" :show-close="true" width="440px">
        <el-form ref="edit_form" :model="data.edit_form" label-position="right" label-width="100px">
          <el-form-item label="团队名称:">
            <el-input v-model="data.edit_form.name" placeholder="请输入团队名称" />
          </el-form-item>
          <el-form-item label="状态:" >
            <el-switch v-model="data.edit_form.status" class="ml-2" :active-value=1 :inactive-value=0 />
          </el-form-item>
        </el-form>
        <template #footer>
          <div class="text-r">
            <el-button type="primary" plain @click="cancelClick">取消</el-button>
            <el-button type="primary" @click="comfirmClick">确认</el-button>
          </div>
        </template>
      </el-dialog>
      <!--删除提醒-->
      <el-dialog v-model="data.deleteModal" @close="closeMethod" title="删除分类" :show-close="true" width="440px">
        <div class="del_text">确定删除已选择的分类吗？</div>
        <template #footer>
          <div class="text-r">
            <el-button type="primary" @click="closeMethod" plain>取消</el-button>
            <el-button type="primary" @click="deleteClick">确认</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
    <!---产品列表-->
  </el-main>
</template>
<script>
import CommonSeach from '@/views/components/CommonSeach/CommonSeach.vue'
import { reactive, onMounted, ref,onActivated} from 'vue'
import Request from '@/utils/request.js'
import { useStore } from 'vuex'
import { ElMessage } from 'element-plus'
export default {
  name: 'Brand',
  components: {
    CommonSeach
  },
  setup () {
    let data = reactive({
      count: 0,
      num: 1,
      value: '',
      type: 'edit',
      dialogTit: '编辑属性',
      editCate: false,
      deleteModal: false,
      language_id: 0,
      list: [],
      diySerach: [],
      row: {},
      query_form: {
      },
      edit_form: {
        id: '',
        language_id: '',
        name: "",
        sort: 1,
        status: 0,
        value: "",
      },
      deleteRow:{}
    })
    let query_form = reactive({
      page: 1,
      size: 10,
      name: '',
    })

    //实例化请求
    let store = useStore()
    const request = new Request()
    onMounted(() => {
      store.state.leftAside.isShowLanguage = false
      data.language_id = store.state.user.language.id
      data.diySerach = [
        [
          { label: 'OPD团队名称', value: '', placeholder: '请输入opd团队名称', type: 'ipt', queryValue: 'name' },
          { type: 'searchReset', url: 'v1/opd_team', otherValue: { page: query_form.page, size: query_form.size } },
          { type: 'spec' },
          { type: 'spec' },
          { type: 'spec' },
        ]
      ]
      
      getList()
    })
    onActivated(()=>{
      store.state.leftAside.isShowLanguage = false
    })
    const getList = () => {
      request.get('v1/opd_team', { page: query_form.page, size: query_form.size }).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 getSeachData = (value) => {
        console.log('value',value)
      data.list = value.data
      data.count = value.count
    }
    //修改状态
    const changeStatus = (row) => {
      console.log(row)
      let query = {
        id: row.id,
        status: row.status
      }
      request.post('v1/opd_team/change_status', query).then(res => {
        if (res.status == 200) {
          ElMessage({
            type: 'success',
            message: res.message
          })
        } else {
          setTimeout(() => {
            getList()
          }, 200)
        }
      })
    }
    //编辑
    const handleEdit = (row, type) => {
      clearData()
      console.log(type)
      if (type == 'edit') {
        data.type = 'edit'
        data.dialogTit = '编辑OPD团队'
        data.edit_form = JSON.parse(JSON.stringify(row))//解除双向绑定
      } else {
        data.type = 'add'
        data.dialogTit = '新增OPD团队'
      }
      data.editCate = true
    }
    const cancelClick = () => {
      data.editCate = false
    }
    //删除
    const handleDel = (row) => {
      data.deleteModal = true
      data.deleteRow = row
    }
    //确认修改
    const comfirmClick = () => {
      console.log(data.edit_form, data.value)
      if (data.type == 'edit') {
        // data.edit_form.value = data.edit_form.value + ',' + data.value
        request.put('v1/opd_team/' + data.edit_form.id, data.edit_form).then(res => {
          if (res.status == 200) {
            data.editCate = false
            getList()
            ElMessage({
              type: 'success',
              message: res.message
            })
          } else {
            ElMessage({
              type: 'error',
              message: res.message
            })
            data.edit_form.status = (!data.edit_form.status) == true ? 1 : 0
          }
        })
      } else {
        data.edit_form.id = ''
        data.edit_form.language_id = data.language_id
        data.edit_form.value = data.value
        request.post('v1/opd_team', data.edit_form).then(res => {
          if (res.status == 200) {
            data.editCate = false
            getList()
            ElMessage({
              type: 'success',
              message: res.message
            })
          } else {
            ElMessage({
              type: 'error',
              message: res.message
            })
          }
        })
      }
    }
    //清除表单数据
    const clearData = () => {
      data.value = ''
      data.edit_form = {
        id: '',
        language_id: '',
        name: "",
        sort: 1,
        status: 0,
        value: "",
      }
    }
    // 删除 - 确定
    const deleteClick = () => {
      let row = data.deleteRow
      request.delete('v1/opd_team/' + row.id).then(res => {
        if (res.status == 200) {
          data.deleteModal = false
          ElMessage({
            type: 'success',
            message: res.message
          })
          getList()
        }
      })
    }
    // 关闭回调
    const closeMethod = () => {
      data.deleteModal = false
    }
    return {
      data,
      query_form,
      getList,
      handleDel,
      handleSizeChange,
      handleCurrentChange,
      handleEdit,
      changeStatus,
      cancelClick,
      comfirmClick,
      clearData,
      getSeachData,
      deleteClick,
      closeMethod
    }
  }
}
</script>
<style scoped>
.operate_box {
  display: flex;
  flex-direction: row;
  justify-content: right;
}
</style>