<template>
  <div class="app-container">

    <!-- 查询和其他操作 -->
    <div class="filter-container">

      <el-input v-model="listQuery.name" clearable class="filter-item" style="width: 160px;" placeholder="请输入服务项名称" />
      <!-- <el-date-picker v-model="listQuery.timeArray" type="datetimerange" class="filter-item" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions" value-format="yyyy-MM-dd HH:mm:ss"/> -->
     
      <el-button v-permission="['GET /admin/preCategory/list']" class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">查找</el-button>
            <el-button  class="filter-item" type="primary" icon="el-icon-plus" @click="addPreCategory">新增服务项</el-button>
    </div>

    <!-- 查询结果 -->
    <div class="table-wrapper">
    <el-table v-loading="listLoading" :data="list" element-loading-text="正在查询中。。。" border  highlight-current-row :fit="true">

      <el-table-column align="center" label="id" prop="id" width="135" />
      <el-table-column align="center" label="服务项名称"  prop="name" />
      
   

      <el-table-column align="center" label="操作"  class-name="small-padding fixed-width"  width="200">
        <template slot-scope="scope">
          <el-button   type="primary" size="mini" @click="handleDetail(scope.row)">详情</el-button>
                    <el-button type="danger" size="mini" @click="handleDeleteConfirm(scope.row)" >删除</el-button>

        </template>
      </el-table-column>
    </el-table>
</div>
    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
  
  <el-dialog :visible.sync="preDialogVisible" title="服务项详情" width="700px"> 
      <p style="padding:0 40px; margin:-20px 0 20px">
          <el-button  class="filter-item" type="primary" icon="el-icon-plus" @click="addTypePreCategory">新增服务类</el-button>
      </p>
      <div  style="padding:0 40px;">
      <el-card shadow="never" style="margin-top: 15px; padding:0 30rpx; ">
            <el-tabs v-model="activeType">
    <el-tab-pane label="品类预检设备详情" name="1">
             <el-table :data="preDetail.jzPreDmDevice" style="margin-top: 20px" border fit>
        <el-table-column align="center" label="id" prop="id"  width="120"/>
        <el-table-column align="center" label="名称" prop="name" />
          <el-table-column align="center" label="操作"  class-name="small-padding fixed-width"  width="200">
        <template slot-scope="scope">
           <el-button type="danger" size="mini" @click="handleTypeDeleteConfirm(scope.row)" >删除</el-button>
        </template>
      </el-table-column>
             </el-table>
    </el-tab-pane>
    <el-tab-pane label="品类预检问题详情" name="2">
         <el-table :data="preDetail.jzPreDmProblem" style="margin-top: 20px" border fit>
        <el-table-column align="center" label="id" prop="id"  width="120"/>
        <el-table-column align="center" label="问题描述" prop="problem" />
         <el-table-column align="center" label="操作"  class-name="small-padding fixed-width"  width="200">
        <template slot-scope="scope">
           <el-button type="danger" size="mini" @click="handleTypeDeleteConfirm(scope.row)"  >删除</el-button>
        </template>
      </el-table-column>
             </el-table>
    </el-tab-pane>
    <el-tab-pane label="检查房间位置详情" name="3">
         <el-table :data="preDetail.jzPreDmPosition" style="margin-top: 20px" border fit>
        <el-table-column align="center" label="id" prop="id"  width="120"/>
        <el-table-column align="center" label="房间位置" prop="name" />
         <el-table-column align="center" label="操作"  class-name="small-padding fixed-width"  width="200">
        <template slot-scope="scope">
           <el-button type="danger" size="mini" @click="handleTypeDeleteConfirm(scope.row)"  >删除</el-button>
        </template>
      </el-table-column>
             </el-table>
    </el-tab-pane>
    
  </el-tabs>
          

      </el-card>
      </div>
  </el-dialog>



       <!-- 新增服务项 -->
    <el-dialog :visible.sync="addPreCategoryVisible" title="新增服务项">
      <el-form
        ref="addPreCategoryForm"
        :model="addPreCategoryForm"
        :rules="addPreCategoryRules"
        status-icon
        label-position="left"
        label-width="100px"
        style="width: 400px; margin-left:50px;"
      >
        <el-form-item label="服务项名称" prop="name">

          <el-input v-model="addPreCategoryForm.name" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addPreCategoryVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmAddPreCategory">确定</el-button>
      </div>
    </el-dialog>

        <!-- 新增服务类 -->
    <el-dialog :visible.sync="addTypePreCategoryVisible" title="新增服务类">
      <el-form
        ref="addTypePreCategoryForm"
        :model="addTypePreCategoryForm"
        :rules="addTypePreCategoryRules"
        status-icon
        label-position="left"
        label-width="100px"
        style="width: 400px; margin-left:50px;"
      >
        <el-form-item label="服务类" prop="type">


           <el-select v-model="addTypePreCategoryForm.type" placeholder="请选择服务类">
            <el-option
              v-for="item in preCategoryTypeList"
              :key="item.type"
              :label="item.name"
              :value="item.type"
            />
          </el-select>
        </el-form-item>
             <el-form-item label="服务类名称" prop="name">

          <el-input v-model="addTypePreCategoryForm.name" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addTypePreCategoryVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmAddTypePreCategory">确定</el-button>
      </div>
    </el-dialog>



  </div>
</template>

<script> 
import { listPreCategory,detailPreCategory,deletePreCategory,addPreCategory, deleteTypePreCategory , addTypePreCategory} from '@/api/pre' 
import Pagination from '@/components/Pagination' // Secondary package based on el-pagination
import { formatDate } from '@/utils/date'
import checkPermission from '@/utils/permission' // 权限判断函数 
 
export default {
  name: 'Pre',
  components: { Pagination },
  filters: { 
  },
  data() {
    return { 
        addPreCategoryVisible:false,
        addTypePreCategoryVisible:false,
        addPreCategoryForm:{
            name:''
        },
        addTypePreCategoryForm:{
          type:'',
          name:'',
        },
         addPreCategoryRules: {
        name: [
          { required: true, message: "请输入服务项名称", trigger: "blur" }
        ],},
         addTypePreCategoryRules: {
        type: [
          { required: true, message: "请选择服务类", trigger: "blur" }
        ],
         name: [
          { required: true, message: "请输入服务类名称", trigger: "blur" }
        ],
        },
        preCategoryTypeList:[
            {
                type:'1',
                name:'品类预检设备'},
                 {
                type:'2',
                name:'品类预检问题'},

 {
                type:'3',
                name:'检查房间位置'},


        ],
        activeType:'1',
        categoryId:'',
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 20,
        bookNo: undefined,
        mobile: undefined,
        sort: 'create_time',
        order: 'desc'
      },
      preDialogVisible: false,
      preDetail: {
          jzPreDmDevice:[],
          jzPreDmPosition:[],
          jzPreDmProblem:[]
      },
      orderDetail:{
        order:{

        }
      },
      rules: {
          refundMoney: [{ required: true, message: '请输入退款金额', trigger: 'blur' }]
      
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      }, 
    }
  },
  computed: {
  }, 
  created() {
    this.getList() 
  },
  methods: {
    checkPermission,
    getList() {
      this.listLoading = true
     
      listPreCategory(this.listQuery).then(response => {
        this.list = response.data.data.list
        this.total = response.data.data.total
        this.listLoading = false
      }).catch(() => {
        this.list = []
        this.total = 0
        this.listLoading = false
      })
    }, 
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    }, 
    handleDetail(row) {
      detailPreCategory(row.id).then(response => {
          
        this.preDetail = response.data.data;
      });
      this.categoryId=row.id
      this.preDialogVisible = true
    }, 
    handleDeleteConfirm(row) {
      this.$confirm('服务项删除后无法恢复，确定继续删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleDelete(row)
      })
    },
    handleDelete(row) {
      deletePreCategory(row.id).then(response => {
        this.$notify.success({
          title: '成功',
          message: '删除成功'
        })
        this.getList()
      }).catch(response => {
        this.$notify.error({
          title: '失败',
          message: response.data.errmsg
        })
      })
    },
    handleTypeDeleteConfirm(row){
         this.$confirm('删除后无法恢复，确定继续删除吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.handleTypeDelete(row);
      })
    },
    handleTypeDelete(row){
       deleteTypePreCategory({id:row.id,type:this.activeType}).then(response => {
        this.$notify.success({
          title: '成功',
          message: '删除成功'
        })
       detailPreCategory(this.categoryId).then(response => {
          
        this.preDetail = response.data.data;
      });
      }).catch(response => {
        this.$notify.error({
          title: '失败',
          message: response.data.errmsg
        })
      })
    },
   

  
 addPreCategory(){
      this.addPreCategoryVisible = true;
 },
 addTypePreCategory(){
this.addTypePreCategoryVisible = true;
 },
    confirmAddPreCategory(){
       this.$refs["addPreCategoryForm"].validate(valid => {
        if (valid) {
          addPreCategory(this.addPreCategoryForm.name)
            .then(response => {
              this.addPreCategoryVisible = false;
              this.$notify.success({
                title: "成功",
                message: "新增成功"
              });
              this.getList();
            })
            .catch(response => {
              this.$notify.error({
                title: "失败",
                message: response.data.errmsg
              });
            });
        }
      }); 
    },
confirmAddTypePreCategory(){
       this.$refs["addTypePreCategoryForm"].validate(valid => {
        if (valid) {
          addTypePreCategory(
              {type:this.addTypePreCategoryForm.type,
              categoryId:this.categoryId,
              name:this.addTypePreCategoryForm.name,
              }
              )
            .then(response => {
              this.addTypePreCategoryVisible = false;
              this.$notify.success({
                title: "成功",
                message: "新增成功"
              });
                detailPreCategory(this.categoryId).then(response => {
          
        this.preDetail = response.data.data;
      });
            })
            .catch(response => {
              this.$notify.error({
                title: "失败",
                message: response.data.errmsg
              });
            });
        }
      }); 
    },


 
  }
}
</script>

<style>
  .detail-container {
    width: 80%;
    padding: 20px 20px 20px 20px;
    margin: 20px auto;
  }

  .operate-container {
    background: #F2F6FC;
    height: 80px;
    margin: -20px -20px 0;
    line-height: 80px;
  }

  .operate-button-container {
    float: right;
    margin-right: 20px
  }

  .table-layout {
    margin-top: 20px;
    border-left: 1px solid #DCDFE6;
    border-top: 1px solid #DCDFE6;
  }

  .table-cell {
    height: 60px;
    line-height: 20px;
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    font-size: 14px;
    color: #606266;
    text-align: center;
    white-space: pre-wrap;
    /* overflow: hidden; */
  }

  .table-cell-title {
    border-right: 1px solid #DCDFE6;
    border-bottom: 1px solid #DCDFE6;
    padding: 10px;
    background: #F2F6FC;
    text-align: center;
    font-size: 14px;
    color: #303133;
  }
  .el-table th.gutter{
    display: table-cell!important;
  }
  .color-danger {
    color: #F56C6C;
    font-size: 18px;
  }
  .img-wrapper img{
    width:100px;
    height: 100px;
    object-fit: contain;
  }
  .table-wrapper{
      max-width:600px;
  }
</style>
