<template>
  <!--绑定了一个 控制是否为全屏fullscreen close-on-click-modal 是否通过点击model进行关闭 visible是否显示弹出框 close关闭按钮 -->
  <el-dialog :title="fullTitle" width="80%" :fullscreen="false" :close-on-click-modal="false" :visible.sync="dialogFormVisible"
   @close="close">
    <!--关闭按钮 调用混用里面得close方法-->
    <!--通过绑定显示对应数值 model为表单数据对象 label-width表单数据大小 form绑定得表单信息-->
    <el-form ref="form" :rules="rules" :model="form" size="medium" :label-width="formLabelWidth" v-loading="loading">
      <!--定义订单信息-->
      <!--订单信息部分-->
      <!--shddow 设置阴影设置时机-->
      <el-card header="订单信息" shadow="hover">
        <el-col :span="12">
          <el-form-item prop="order.name" label="订单名称" >
            <el-input   v-model="form.order.name" :disabled="viewMode"/>
          </el-form-item>
        </el-col>
        <el-col  :span="12">
          <el-form-item prop="order.client" label="客户名称">
            <el-input v-model="form.order.client" :disabled="viewMode"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item  prop="order.order_number" label="订单编号">
            <el-input v-model="form.order.order_number" :disabled="viewMode"/>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item  prop="order.column" label="业务单元" :label-width="formLabelWidth">
            <!--注意用户的返回值-->
            <el-select  v-model="form.order.business_module"  placeholder="请选择所属单元">
              <el-option @change="UploadUrl"  v-for="business_module in business_modules" :label="business_module" :value="business_module"></el-option>
            </el-select>
          </el-form-item>
      <!--   <el-form-item label="业务单元">
            <el-input v-model="form.order.business_module" :disabled="viewMode"/>
          </el-form-item>-->
        </el-col>
        <!--el-col来修饰布局-->
        <el-col :span="12">
          <el-form-item prop="order.money" label="订单金额">
            <el-input-number v-model="form.order.money" :disabled="viewMode"/>
          </el-form-item>
        </el-col>
      </el-card>
      <!--任务信息部分-->
      <el-card shadow="hover" header="任务信息" >
        <account-filter-select :viewMode="viewMode" @select="onSelectAccount" />
        <div class="department-container" v-if="form.departmentList.length > 0" v-for="(dep,index) in form.departmentList">
          <el-row class="department-info">
            <el-avatar src="../../assets/logo.png" class="department-avatar" />
            <span class="department-name">
              {{ dep.name }}
            </span>
          </el-row>
          <!--任务金额-->
          <el-form-item label="任务金额">
            <el-input-number v-model="dep.money" :disabled="viewMode"></el-input-number>
          </el-form-item>
 
          <template v-for="(acc,item) in dep.accounts">
            <el-divider />
            <el-row class="media-container">
              <span class="media-info">
                {{ acc.name }}
              </span>
              <el-button type="primary" @click="addFrom(index,item)" :disabled="viewMode">+</el-button>
            </el-row>
 
            <el-form-item label="刊例价" >
              {{ acc.price }}
            </el-form-item>
            <template v-for="(task, index) in acc.tasks">
              <el-form-item :label="index + 1 + '. 任务名称'">
                <el-input v-model="task.name" :disabled="viewMode"/>
              </el-form-item>
              <el-form-item :label="index + 1 + '.发布时间'">
                <el-date-picker v-model="task.start_time" :disabled="viewMode"/>
              </el-form-item>
            </template>
          </template>
        </div>
      </el-card>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <template v-if="approveMode">
        <el-button @click="reject('order',{status:-1,remark:''})">审核退回</el-button>
        <!--审核完成变成待接收-->
        <el-button type="primary" @click="approve('order',{status:2,remark:''})">审核通过</el-button>
      </template>
      <template v-if="viewMode">
        <el-button @click="close">关 闭</el-button>
      </template>
      <template v-else>
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </template>
    </div>
  </el-dialog>
</template>
 
<script>
  import {
    AddEditDialogMixin
  } from "@/component/dialog/AddEditDialogMixin";
  import AccountFilterSelect from "./accountSelect/AccountFilterSelect";
  import {getAction} from "@/api";
 
  /*定义一个对象*/
  const defaultForm = {
    order: {
      /*订单名称*/
      name: "",
      /*客户名称*/
      client: "",
      order_number: "",
      business_module: "",
      money: "",
      department_id: ''
    },
    departmentList: []
  };
  export default {
    name: "EditOrderDialog",
    mixins: [AddEditDialogMixin],
    components: {
      AccountFilterSelect
    },
    data() {
      return {
 
        rules:{
          order:{
          name: [
            { required: true, message: '名称不能为空',trigger: 'blur'}, // 'blur'是鼠标失去焦点的时候会触发验证
          ],
          client: [
            { required: true, message: '客户名称不能为空',trigger: 'blur'}, // 'blur'是鼠标失去焦点的时候会触发验证
          ],
          money: [
            { required: true, message: '刊例价不能为空',trigger: 'blur'}, // 'blur'是鼠标失去焦点的时候会触发验证
          ],
          order_number: [
            { required: true, message: '订单编号不能为空',trigger: 'blur'}, // 'blur'是鼠标失去焦点的时候会触发验证
          ],
          column: [
            { required: true, message: '业务单元不能为空',trigger: 'blur'}, // 'blur'是鼠标失去焦点的时候会触发验证
          ],
        },
        },
        //控住按钮状态
        form: defaultForm,
        defaultForm: defaultForm,
        formLabelWidth: "160px",
        url: {
          add: "/order",
          edit: "/order",
          query: "/order"
        },
        /*存储业务单元*/
        business_modules:[]
      };
    },
    created() {
      this.UploadUrl()
    },
    /*用一个计算属性*/
    computed: {
      fullTitle() {
        return this.title + "订单";
      },
      DepartmentId(){
        return this.$store.state.department.id
      }
    },
    methods: {
      UploadUrl(){
        getAction("/department/attribute/"+this.DepartmentId).then(res=>{
          console.log(res)
          this.business_modules=res.data.business_module
        })
      },
      /*控制任务的添加功能*/
      addFrom(index,item) {
        var tasks = {
          name: "",
          start_time: null
        }
        this.form.departmentList[index].accounts[item].tasks.push(tasks);
  },
      onSelectAccount(data) {
        for (var i = 0; i < data.length; i++) {
          /*定义一个status */
          var status = this.isShowDepartment(data[i].department_id, data[i].id, this.form.departmentList);
          switch (status.code) {
            case 1:
              var info = {
                id: data[i].department_id,
                name: data[i].departmentName,
                money: data[i].price,
                accounts: [{
                  id: data[i].id,
                  name: data[i].name,
                  price: data[i].price,
                  tasks: [{
                    name: "",
                    start_time: null
                  }]
                }]
              };
              this.form.departmentList.push(info);
              break;
            case 2:
              var info = {
                id: data[i].id,
                name: data[i].name,
                price: data[i].price,
                tasks: [{
                  name: "",
                  start_time: null
                }]
              }
              this.form.departmentList[status.i].money = parseFloat(this.form.departmentList[status.i].money) +
                parseFloat(data[i].price);
              this.form.departmentList[status.i].accounts.push(info);
              break;
            case 3:
              break;
 
          }
        }
      },
      //判断是否存在部门(三个参数 第一个是部门id  第二个是账号id 第三个是传入对象)
      /*判断对象 如果里面有传入对象 就开始遍历 如果遍历有对象 返回1 department_id 返回2 有accout 返回2*/
      isShowDepartment(department_id, account_id, list) {
        /*如果这个list得长度对象大于0*/
        if (list.length > 0) {
          /*循环遍历*/
          for (var i = 0; i < list.length; i++) {
            /*如果循环遍历得id等同于当前得department_id*/
            if (list[i].id == department_id) {
              /*遍历循环得到当前得长度*/
              for (var j = 0; j < list[i].accounts.length; j++) {
                if (list[i].accounts[j].id == account_id) {
                  return {
                    code: 3
                  };
                }
              }
              return {
                code: 2,
                i: i
              };
            }
          }
          return {
            code: 1
          }
        }
        return {
          code: 1
        };
      },
 
 
    }
  };
</script>
 
<style lang="scss" scoped>
  .department-container {
    margin: 20px;
    padding: 20px;
    border: 1px dashed #dcdfe6;
 
    .department-info {
      padding: 20px 25px;
 
      .department-avatar {
        vertical-align: middle;
      }
 
      .department-name {
        vertical-align: middle;
        color: #707070;
        font-size: 18px;
        margin-left: 20px;
      }
    }
 
    .media-container {
      margin-bottom: 20px;
 
      .media-info {
        display: inline-block;
        margin: 10px 50px;
        padding: 20px 25px;
        border: 1px dashed #dcdfe6;
        border-radius: 4px;
      }
    }
  }
</style>