{% extends "BOM/layout.html" %}
{% load static %}
{% block script %}
<script src="{% static 'axios.min.js' %}"></script>
<script src="{% static 'qs.js' %}"></script>
<script src="{% static 'react.production.min.js' %}"></script>
<script src="{% static 'react-dom.production.min.js' %}"></script>
<script src="{% static 'babel.min.js' %}"></script>
{% endblock script %}
{% block body %}
<div id="main" class="container-fluid">
    <form method="post">
        {% csrf_token %}
        <div id="mainForm"></div>
        <div class="card">
            <div class="card-header">ECN总体签核状态</div>
            <div class="card-body">
                {% for sign_off in sign_offs %}
                <div class="alert alert-secondary">
                    <div>签核者：{{ sign_off.owner.name }}</div>
                    <div>签核状态：{{ sign_off.status }}</div>
                    <div>签核备注：<div>{{ sign_off.comment }}</div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
        {% if is_ecn_signoff %}
        <div class="mb-3 mt-3">
            <label for="comment" class="form-label">ECN签核备注:</label>
            <textarea type="textarea" class="form-control" id="sign_off_comment" placeholder="输入ECN签核备注"
                name="sign_off_comment" maxlength="256"></textarea>
        </div>
        {% endif %}
        
        <div id="form-button-area">
            {% if is_ecn_signoff %}
            <button type="submit" name="approve" value="approve" class="btn btn-success">批准</button>
            <button type="submit" name="reject" value="reject" class="btn btn-danger">拒绝</button>
                {% if is_ecn_creator %}
                <button type="submit" name="cancel" value="cancel" class="btn btn-danger">取消</button>
                {% endif %}
            {% endif %}
            {% comment %} <a href="/BOM/ECN/my_list/">返回列表</a> {% endcomment %}
            <a href="#" onclick="window.history.back();">返回列表</a>
        </div>

    </form>
</div>
<script type="text/babel">

    class MainForm extends React.Component {

        constructor(props) {
            super(props);
            this.state = {
                ecn_id: 0,
                id: 0,
                part_number: "",
                description: "",
                comment: "",
                version: "",
                sub_parts: [],
                source_type: 'build',
                vendor_name: "",
                vendor_detail: {},
                vendor_part_number: "",
                attachment: []
            }
        }

        componentDidMount() {
            let id = this.getQueryVariable("ecn_id")
            if (id) {
                this.genEcnPartDetail(id)
                this.forceUpdate()
            }
        }

        genEcnPartDetail(id) {
            var that = this
            axios({
                method: "GET",
                headers: { 'content-type': 'application/x-www-form-urlencoded' },
                params: { ecn_id: id },
                // data: Qs.stringify({ delete_user_id: user_id }),
                url: "/BOM/part/ecn/part_detail/"
            }).then(function (response) {
                if (response.data.code != 0) {
                    // 检测失败
                    alert(response.data.content)
                } else {
                    // 检测成功
                    console.log('content', response.data.content)
                    let part_data = response.data.content.part
                    if (part_data.version.toString().length < 2) {
                        part_data.version = "0" + part_data.version
                    }
                    that.setState({
                        id: part_data.id,
                        part_number: part_data.part_number,
                        description: part_data.description,
                        comment: part_data.comment,
                        version: part_data.version,
                        sub_parts: part_data.sub_parts,
                        source_type: part_data.source_type,
                        vendor_name: part_data.vendor_name,
                        vendor_detail: part_data.vendor_detail,
                        vendor_part_number: part_data.vendor_part_number,
                        attachment: part_data.attachment
                    })
                    document.getElementById("part_number").value = that.state.part_number
                    document.getElementById("description").value = that.state.description
                    document.getElementById("version").value = that.state.version
                    document.getElementById("comment").value = that.state.comment
                    document.getElementById("part_number").value = that.state.part_number
                    document.getElementById("source_type").value = that.state.source_type
                    if (that.state.source_type == 'purchase') {
                        document.getElementById("vendor_name").value = that.state.vendor_detail.name
                        document.getElementById("vendor_part_number").value = that.state.vendor_detail.code
                    }
                    that.setState({
                        ecn_id: response.data.content.ecn_id
                    })
                }
            }).catch(function (error) {
                console.log(error)
            })
        }

        sourceInfo() {
            console.log("this.state.source_type", this.state.source_type)
            if (this.state.source_type == 'build') {
                return (
                    <div></div>
                )
            }
            if (this.state.source_type == 'purchase') {
                return (
                    <div>
                        <div class="mb-3 mt-3">
                            <label for="vendor_name" class="form-label">供应商:</label>
                            <div class="supplier_search">
                                <input type="text" class="form-control" id="vendor_name" placeholder="输入供应商" name="vendor_name" required maxlength="128" disabled="true" />
                            </div>
                        </div>
                        <div class="mb-3 mt-3">
                            <label for="vendor_part_number" class="form-label">供应商料号:</label>
                            <input type="text" class="form-control" id="vendor_part_number" placeholder="输入供应商料号" name="vendor_part_number" maxlength="16" disabled="true" />
                        </div>
                    </div>

                )
            }
            // this.forceUpdate()
        }

        attachmentList() {
            if (this.state.attachment.length == 0) {
                return (
                    null
                )
            } else {
                return (
                    <div class="attachmentList">
                        {this.state.attachment.map((row, index) =>
                            <a href={row.url}>{row.display_name}</a>
                        )}
                    </div>
                )
            }
        }

        subPartForm() {
            let formFrame = () => {
                return (
                    <div>
                        <table className="table table-striped">
                            <thead>
                                <tr>
                                    <th>料号</th>
                                    <th>描述</th>
                                    <th>数量</th>
                                </tr>
                            </thead>
                            <tbody>
                                {items()}
                            </tbody>
                        </table>

                    </div>
                )
            }
            let items = () => {
                return (
                    this.state.sub_parts.map((item, index) =>
                        <tr key={index}>
                            <td>{item.part_number}</td>
                            <td>{item.description}</td>
                            <td><input class="form-control BOM-qty" type="number" value={item.qty} disabled="true" /></td>
                        </tr>
                    )
                )
            }
            if (this.state.sub_parts.length == 0) {
                return ("")
            } else {
                return (
                    <div>
                        {formFrame()}
                    </div>
                )
            }
        }

        showState() {
            console.log(this.state)
        }

        getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) { return pair[1]; }
            }
            return (false);
        }


        render() {
            this.showState()
            return (
                <div>
                    <input type="hidden" name="id" value={this.state.id} />
                    <input type="hidden" name="ecn_id" value={this.state.ecn_id} />
                    <div class="mb-3 mt-3">
                        <label for="part_number" class="form-label">料号:</label>
                        <input type="text" class="form-control" id="part_number" placeholder="输入料号" name="part_number" required maxlength="16" minlength="5" disabled="true" />
                    </div>
                    <div class="mb-3 mt-3">
                        <label for="description" class="form-label">描述:</label>
                        <input type="text" class="form-control" id="description" placeholder="输入描述" name="description" required maxlength="128" disabled="true" />
                    </div>
                    <div class="mb-3 mt-3">
                        <label for="version" class="form-label">版本号:</label>
                        <input type="text" class="form-control" id="version" placeholder="输入版本号" name="version" required maxlength="8" disabled="true" />
                    </div>
                    <div class="mb-3 mt-3">
                        <label for="source_type" class="form-label">来源:</label>
                        <select class="form-select" id="source_type" name="source_type" disabled="true">
                            <option value="build" >自产</option>
                            <option value="purchase" >采购</option>
                        </select>
                    </div>
                    {this.sourceInfo()}
                    <div class="mb-3 mt-3">
                        <label for="comment" class="form-label">料号备注:</label>
                        <textarea type="textarea" class="form-control" id="comment" placeholder="输入备注" name="comment" maxlength="256" disabled="true" value={this.state.part_number}></textarea>
                    </div>
                    <div class="card">
                        <div class="card-header">附件</div>
                        <div class="card-body">
                            {this.attachmentList()}
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-header">下阶物料</div>
                        <div class="card-body">
                            {this.subPartForm()}
                        </div>

                    </div>

                </div>
            )
        }
    }

    ReactDOM.render(<MainForm />, document.getElementById("mainForm"))

</script>
<style type="text/css">
    #main {
        display: inline-flex;
        justify-content: center;
    }

    form {
        justify-content: center;
        margin: 50px;
        width: inherit;
    }

    #form-button-area {
        display: flex;
        justify-content: space-around;
        margin-top: 10px;
    }

    div.attachmentList {
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
    }

    div.supplier_search {
        display: flex;
        justify-content: flex-start;
    }

    .card {
        margin-bottom: 10px;
        width: 100%;
    }

    .BOM-qty {
        width: 100px;
    }
</style>
{% endblock body %}