<template>
  <div class="app-container">
        <div>
        <el-button type="primary" icon="el-icon-plus" @click="handleCreate">新增</el-button>
        </div>
        <el-table
          v-loading="listLoading"
          :data="unitList"
          style="width: 100%;margin-top:10px;"
          border
          fit
          stripe
          highlight-current-row
          max-height="600"
        >
          <el-table-column type="index" width="50" />
          <el-table-column align="center" label="类型名称">
            <template slot-scope="scope">{{ scope.row.name }}</template>
          </el-table-column>
          <el-table-column align="center" label="描述">
            <template slot-scope="scope">{{ scope.row.description }}</template>
          </el-table-column>
          <el-table-column align="header-center" label="采用标准">
            <template slot-scope="scope">{{ scope.row.standard_.code }} {{ scope.row.standard_.name }}</template>
          </el-table-column>
                <el-table-column align="center" label="操作" width="260px">
        <template slot-scope="scope">
          <el-button
            type="primary"
            size="small"
            :disabled="!checkPermission(['implementrule_update'])"
            @click="handleUpdate(scope)"
          >编辑</el-button>

          <el-button
            type="danger"
            size="small"
            :disabled="!checkPermission(['implementrule_delete'])"
            @click="handleDelete(scope)"
          >删除</el-button>
        </template>
                </el-table-column>
        </el-table>
            <el-dialog :visible.sync="dialogVisible" :title="dialogType==='update'?'编辑':'新增'">
      <el-form
        ref="Form"
        :model="unittype"
        label-width="80px"
        label-position="right"
        :rules="rule1"
      >
        <el-form-item label="名称" prop="name">
          <el-input v-model="unittype.name" placeholder="名称" />
        </el-form-item>
        <el-form-item label="描述" prop="description">
          <el-input v-model="unittype.description" placeholder="描述" />
        </el-form-item>
        <el-form-item label="采用标准" prop="standard">
            <el-button type="primary" @click="chooseVisible=true" >选择</el-button>
<el-link
            type="primary"
            :href="unittype.standard_.path"
            target="_blank"
            v-if="unittype.standard"
          >{{ unittype.standard_.code }} {{ unittype.standard_.name }}</el-link>
            
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
        <el-button type="danger" @click="dialogVisible=false">取消</el-button>
        <el-button type="primary" @click="confirm('Form')">确认</el-button>
      </div>
    </el-dialog>
    <Standardchoose :chooseVisible="chooseVisible" @chooseComplete="chooseComplete"></Standardchoose>
  </div>
</template>
<script>
import { getUnitTypeList, createUnitType, updateUnitType, deleteUnitType} from "@/api/implementrule"
import Pagination from "@/components/Pagination"
import checkPermission from '@/utils/permission'
import  Standardchoose from '@/views/standard/standardchoose'
export default {
  name:'Unittype',
  components: { Pagination, Standardchoose },
  props:['implementrule'],
  data() {
    return {
      unittype:{},
      unitList: [],
      listLoading: true,
      listQuery: {
        implementrule:this.implementrule
      },
      rule1: {
        name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
        //description: [{ required: true, message: '请输入描述', trigger: 'blur' }]
      },
      dialogVisible:false,
      dialogType:'create',
      standardOptions:[],
      chooseVisible:false,
    };
  },
  
  created() {
    this.getList()
  },
  methods: {
    checkPermission,
    getList() {
      this.listLoading = true;
      getUnitTypeList(this.listQuery).then(response => {
        if (response.data) {
          this.unitList = response.data
        }
        this.listLoading = false
      });
    },
    handleCreate() {
      this.unittype = {
  id: null,
  name: null,
  description: null,
  standard:null,
  implementrule:this.implementrule
}
      this.dialogType = 'create'
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs['Form'].clearValidate()
      })
    },
    handleUpdate(scope) {
      this.unittype = Object.assign({}, scope.row) // copy obj
      this.dialogType = 'update'
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs['Form'].clearValidate()
      })
    },
handleDelete(scope){
    deleteUnitType(scope.row.id).then(res=>{
        this.$message.success('成功')
              this.getList()
    })
},
    chooseComplete(val){
        if(val){
            this.unittype.standard_ = val
            this.unittype.standard = val.id
        }
        this.chooseVisible = false
    },
        async confirm(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          const isEdit = this.dialogType === 'update'
          if (isEdit) {
            updateUnitType(this.unittype.id, this.unittype).then(() => {
              this.getList()
              this.dialogVisible = false
              this.$message.success('成功')
            })
          } else {
            createUnitType(this.unittype).then(res => {
              this.getList()
              this.dialogVisible = false
              this.$message.success('成功')
            })
          }
        } else {
          return false
        }
      })
    }
  }
};
</script>
