<template>
  <div>
    <el-button size="mini" type="primary" @click="editBtn">编 辑</el-button>
    <el-drawer title="新 建" append-to-body :show-close="false" :visible.sync="dialogFormVisible" size="40%">
      <div slot="title" style="font-size: 15px">
        编辑服务工单
      </div>
      <div class="drawer__panel">
        <el-row :gutter="20">
          <el-form :model="form" :rules="rules" ref="form" label-width="140px" label-position="right" size="mini">
            <el-col :span="24">
              <el-form-item label="申请单:" prop="billno">
                <selectOrder ref="order" @selectRow="orderChange">
                    <el-input readonly type="text" slot="input" size="mini" @focus="$refs.order.listData(),$refs.order.visible=true" v-model="form.billno"></el-input>
                </selectOrder>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="工单模板:" prop="templatename">
                <selectTemplate ref="template" @selectRow="templateChange">
                    <el-input readonly type="text" slot="input" size="mini" @focus="$refs.template.listData(),$refs.template.visible=true" v-model="form.templatename"></el-input>
                </selectTemplate>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="是否在保" prop="inqualityguaranteeperiod">
                <el-radio-group v-model="form.inqualityguaranteeperiod">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="是否在我司产品" prop="isouritem">
                <el-radio-group v-model="form.isouritem">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="异常属实" prop="isfact">
                <el-radio-group v-model="form.isfact">
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="联系人" prop="scenecontact">
                <el-input v-model="form.scenecontact" placeholder="请输入联系人"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="联系人角色" prop="scenecontactrole">
                <el-input v-model="form.scenecontactrole" placeholder="请输入联系人角色"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="联系人电话" prop="scenecontactphonenumber">
                <el-input v-model="form.scenecontactphonenumber" placeholder="请输入联系人电话"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="服务团队" prop="servicetype">
                <selectTeam ref="team" @teamChange="teamChange">
                  <el-tag
                    style="margin-bottom:10px"
                    :key="tag.userid"
                    v-for="tag in form.projectlearders"
                    closable
                    :disable-transitions="false"
                    @close="handleClose(tag)">
                    {{tag.name}}
                  </el-tag>
                  <el-button class="button-new-tag" size="small" @click="$refs.team.dialogFormVisible=true">+ New people</el-button>
                </selectTeam>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="备注" prop="remarks">
                <el-input type="textarea" v-model="form.remarks" placeholder="请输入备注"></el-input>
              </el-form-item>
            </el-col>
          </el-form>
        </el-row>
      </div>
      <div class="fixed__btn__panel">
        <el-button size="small" @click="dialogFormVisible = false" class="normal-btn-width">取 消</el-button>
        <el-button size="small" type="warning" @click="onSubmit" class="normal-btn-width btn-warning">确 定</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import selectOrder from './selectOrder'
import selectTemplate from './selectTemplate'

import selectTeam from './teamSelect'
import { log } from '@antv/g2plot/lib/utils'
export default {
  name: "add",
  props:['data'],
  components:{selectOrder,selectTemplate,selectTeam},
  data(){
    return {
      dialogFormVisible:false,
      serveClassList:[],
      form:{
        "sa_workorderid":'',     //sa_brandid<=0时 为新增
        "sa_serviceorderid":'',
        "billno":'',
        "sa_workorder_templateid":'',
        "templatename":'',
        "name":'',
        "remarks":"",
        "inqualityguaranteeperiod":1,
        "isouritem":1,
        "isfact":1,
        "reason":"",
        "address":"",
        "scenecontact":"",
        "scenecontactrole":"",
        "scenecontactphonenumber":"",
        "projectlearders":[]
      },
      rules:{
        billno:[
          { required: true, message: '请选择申请单', trigger: 'change'},
        ],
        templatename:[
          { required: true, message: '请选择模板', trigger: 'change'}
        ],
        scenecontactphonenumber:[
          { pattern:/^1[3-9][0-9]\d{8}$/, message: '请输入正确手机号码',trigger: 'blur' }
        ],
      },
    }
  },
  methods:{
    editBtn () {
      this.dialogFormVisible = true
      this.form = Object.assign({},this.form,this.data)
      this.form.projectlearders = this.form.team
      console.log(this.form);
      
    },
    onSubmit(){
      console.log(this.form)
      this.$refs['form'].validate(async (valid) => {
        if (!valid) return false
        this.form.projectlearders = this.form.projectlearders.map(item => item.userid)
        const res = await this.$api.requested({
          "id": "20230208140003",
          "version":1,
          "content": this.form
        })
        this.tool.showMessage(res,()=>{
          this.$emit('onSuccess')
          this.$refs['form'].resetFields();
          this.dialogFormVisible = false
        })
      })
    },
    async getTeamList () {
      let res = await this.$api.requested({
        "id":20230206112003,
        "content": {
        }
      })
      this.serveClassList = res.data
      console.log(this.serveClassList);
      
    },
    orderChange (data) {
      console.log(data);
      
      this.form.billno = data.billno
      this.form.sa_serviceorderid = data.sa_serviceorderid
      this.$refs.order.visible = false
    },
    templateChange (data) {
      console.log(data);
      
      this.form.name = data.name
      this.form.sa_workorder_templateid = data.sa_workorder_templateid
      this.$refs.template.visible = false
    },
    handleClose(tag) {
      this.form.projectlearders.splice(this.form.projectlearders.indexOf(tag), 1);
    },
    teamChange (data) {
      let result = data.map(item => {
        return {
          name:item.name,
          userid:item.userid
        }
      })
      this.form.projectlearders.push(...result)
      this.$refs.team.dialogFormVisible = false
    }
  },
  created () {
  }
}
</script>

<style scoped>
.dialog-footer {
  margin-top: 0;
}
.el-select,.el-input,.el-cascader {
  width: 100% !important;
}
.el-tag + .el-tag {
  margin-left: 10px;
}
.button-new-tag {
  margin-left: 10px;
  height: 32px;
  line-height: 30px;
  padding-top: 0;
  padding-bottom: 0;
}
.input-new-tag {
  width: 90px;
  margin-left: 10px;
  vertical-align: bottom;
}
</style>